@skodaflow/web-library 3.2.4 → 3.3.0-alpha.0

package/README.md

@@ -1,120 +1,81 @@
-## `@skodaflow/web-library@2.x`
-
-> Flow Web Library is the REACT implementation of the Skoda Flow Design system:
-> https://skodaauto.frontify.com/d/SCWeidKKNkoy
->
-> This package is a set of all assets for frontend web development and set of react components for Skoda Auto web applications.
-
-## Installation
-
-#### Library location
-
-Library is located in public NPM repository. You also need to define **@skodaflow** scope:
-
-```
-registry=https://registry.npmjs.com/
-```
-
-#### Install package
-
-For NPM use command:
-
-```
-npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library --save
-```
-
-For Yarn use command:
-
-```
-yarn add @mui/material @emotion/react @emotion/styled @skodaflow/web-library
-```
-
-@mui/material is the peer dependency but minimal required version is 5.0.1.
-According to documentation, @mui/material has another peer dependency to @emotion, so you need to install all dependencies.
-For more details: https://mui.com/getting-started/installation/
-
-## Usage
-
-**1. Step.**
-In the root component of your application, for example in app.jsx use SkodaTheme.
-
-```
-import { SkodaTheme } from '@skodaflow/web-library';
-```
-
-Then wrap your app into SkodaTheme:
-
-```
-<SkodaTheme>
-   <App />
-</SkodaTheme>
-```
-
-All content inside this wrapper will now styled according to Skoda Flow Design System.
-Content out of the SkodaTheme will stay untouched. Skoda Flow Design System will be aplied only on child elements.
-For global usage of foundation as typography, colors and effects variables out of the SkodaTheme wrapper include global stylesheet:
-
-```
-import '@skodaflow/web-library/theme/skoda/globals.css';
-```
-
-**1.1 Fonts.**
-If your application is created from scratch without assets like a fonts, and these assets are not delivered to client by higher scope (any kind of Layout or runtime where is your application running), then you need to include Skoda Next font from @skodaflow/web-library.
-
-```
-import '@skodaflow/web-library/theme/skoda/fonts.css'
-```
-
-Please, take care about including Skoda Next font to your application, because it is the important part of Skoda Flow Design System.
-
-**1.2 Icons.**
-If your application need to use SkodaNext icon font, include icon font asset too.
-
-```
-import '@skodaflow/web-library/theme/skoda/icons.css'
-```
-
-**2. Step.** Use prepared components from library, for example: Button.
-
-```
-import {Button} from '@skodaflow/web-library'
-
-const MyComponents = () => {
-	return <Button label="Primary" />
-}
-```
-
-For detailed documentation about Flow foundation visit:
-https://skodaauto.frontify.com/d/SCWeidKKNkoy/web
-
-For preview of components and Storybook visit:
-https://skodaflow-web.azurewebsites.net/
-
-## Additional usage
-
-All components are now based on most powerfull and popular library @mui/material.
-This core library was used for speed up development of flow components and web-library is the set of high order components designed by Skoda Flow theme.
-For more details about core library please visit: https://mui.com/
-
-If there is no prepared component in @skodaflow/web-library what you need,
-you still can use all components available in core MUI library.
-
-#### Migration from 1.x to 2.x
-
-1. update @skodaflow/web-library to version 2.x and install dependencies
-
-```
-npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library@^2.0.0 --save
-```
-
-2. wrap your application to SkodaTheme
-
-```
-import { SkodaTheme } from '@skodaflow/web-library';
-
-<SkodaTheme>
-   <App />
-</SkodaTheme>
-```
-
-3. Remove this import from root: ~~import '@skodaflow/web-library/theme/skoda'~~
+# `@skodaflow/web-library`
+
+> Flow Web Library is the REACT implementation of the Skoda Flow Design system:
+> https://skoda-brand.com/hub/26
+>
+> This package is a set of all assets for frontend web development and set of react components for Skoda Auto web applications.
+
+## Installation
+
+Library is located in public NPM repository.
+
+```bash
+# for npm users
+npm i @emotion/react @emotion/styled @mui/material @mui/system react @skodaflow/web-library
+
+# for yarn users
+yarn add @emotion/react @emotion/styled @mui/material @mui/system react @skodaflow/web-library
+```
+
+@mui/material is the peer dependency (minimal required version is 5.9.0).
+According to documentation, @mui/material has another peer dependency to @emotion, so you need to install all dependencies. For more details: https://mui.com/getting-started/installation/
+
+## Usage
+
+### Basic Usage
+
+Use theme provider in the root component of your application (eg. App.tsx).
+
+```tsx
+// use library provider
+import { SkodaThemeProvider } from '@skodaflow/web-library';
+...
+<SkodaThemeProvider>
+   <App/>
+</SkodaThemeProvider>
+
+// use MUI provider with custom theme
+// this allows to change skoda theme when needed
+import { skodaTheme } from '@skodaflow/web-library';
+import { ThemeProvider } from '@mui/material';
+...
+<ThemeProvider theme={skodaTheme}>
+   <App/>
+</ThemeProvider>
+```
+
+### Global Styles
+
+All content inside theme provider is now styled according to Skoda Flow Design System.
+Content out of the SkodaTheme will stay untouched. Skoda Flow Design System will be applied only on child elements.
+For global usage of foundation as typography, colors and effects variables out of the SkodaTheme wrapper include global stylesheet
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/globals.css";
+```
+
+### Fonts
+
+If your application is created from scratch without assets like a fonts, and these assets are not delivered to client by higher scope (any kind of Layout or runtime where is your application running), then you need to include Skoda Next font from @skodaflow/web-library.
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/fonts.css";
+```
+
+Please, take care about including Skoda Next font to your application, because it is the important part of Skoda Flow Design System.
+
+### Icons
+
+If your application need to use SkodaNext icon font, include icon font asset too.
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/icons.css";
+```
+
+---
+
+For detailed documentation about Flow foundation visit:
+https://skodaauto.frontify.com/d/SCWeidKKNkoy/web
+
+For preview of components and Storybook visit:
+https://skodaflow-web.azurewebsites.net/

package/build/README.md

@@ -1,120 +1,81 @@
-## `@skodaflow/web-library@2.x`
-
-> Flow Web Library is the REACT implementation of the Skoda Flow Design system:
-> https://skodaauto.frontify.com/d/SCWeidKKNkoy
->
-> This package is a set of all assets for frontend web development and set of react components for Skoda Auto web applications.
-
-## Installation
-
-#### Library location
-
-Library is located in public NPM repository. You also need to define **@skodaflow** scope:
-
-```
-registry=https://registry.npmjs.com/
-```
-
-#### Install package
-
-For NPM use command:
-
-```
-npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library --save
-```
-
-For Yarn use command:
-
-```
-yarn add @mui/material @emotion/react @emotion/styled @skodaflow/web-library
-```
-
-@mui/material is the peer dependency but minimal required version is 5.0.1.
-According to documentation, @mui/material has another peer dependency to @emotion, so you need to install all dependencies.
-For more details: https://mui.com/getting-started/installation/
-
-## Usage
-
-**1. Step.**
-In the root component of your application, for example in app.jsx use SkodaTheme.
-
-```
-import { SkodaTheme } from '@skodaflow/web-library';
-```
-
-Then wrap your app into SkodaTheme:
-
-```
-<SkodaTheme>
-   <App />
-</SkodaTheme>
-```
-
-All content inside this wrapper will now styled according to Skoda Flow Design System.
-Content out of the SkodaTheme will stay untouched. Skoda Flow Design System will be aplied only on child elements.
-For global usage of foundation as typography, colors and effects variables out of the SkodaTheme wrapper include global stylesheet:
-
-```
-import '@skodaflow/web-library/theme/skoda/globals.css';
-```
-
-**1.1 Fonts.**
-If your application is created from scratch without assets like a fonts, and these assets are not delivered to client by higher scope (any kind of Layout or runtime where is your application running), then you need to include Skoda Next font from @skodaflow/web-library.
-
-```
-import '@skodaflow/web-library/theme/skoda/fonts.css'
-```
-
-Please, take care about including Skoda Next font to your application, because it is the important part of Skoda Flow Design System.
-
-**1.2 Icons.**
-If your application need to use SkodaNext icon font, include icon font asset too.
-
-```
-import '@skodaflow/web-library/theme/skoda/icons.css'
-```
-
-**2. Step.** Use prepared components from library, for example: Button.
-
-```
-import {Button} from '@skodaflow/web-library'
-
-const MyComponents = () => {
-	return <Button label="Primary" />
-}
-```
-
-For detailed documentation about Flow foundation visit:
-https://skodaauto.frontify.com/d/SCWeidKKNkoy/web
-
-For preview of components and Storybook visit:
-https://skodaflow-web.azurewebsites.net/
-
-## Additional usage
-
-All components are now based on most powerfull and popular library @mui/material.
-This core library was used for speed up development of flow components and web-library is the set of high order components designed by Skoda Flow theme.
-For more details about core library please visit: https://mui.com/
-
-If there is no prepared component in @skodaflow/web-library what you need,
-you still can use all components available in core MUI library.
-
-#### Migration from 1.x to 2.x
-
-1. update @skodaflow/web-library to version 2.x and install dependencies
-
-```
-npm install @mui/material @emotion/react @emotion/styled @skodaflow/web-library@^2.0.0 --save
-```
-
-2. wrap your application to SkodaTheme
-
-```
-import { SkodaTheme } from '@skodaflow/web-library';
-
-<SkodaTheme>
-   <App />
-</SkodaTheme>
-```
-
-3. Remove this import from root: ~~import '@skodaflow/web-library/theme/skoda'~~
+# `@skodaflow/web-library`
+
+> Flow Web Library is the REACT implementation of the Skoda Flow Design system:
+> https://skoda-brand.com/hub/26
+>
+> This package is a set of all assets for frontend web development and set of react components for Skoda Auto web applications.
+
+## Installation
+
+Library is located in public NPM repository.
+
+```bash
+# for npm users
+npm i @emotion/react @emotion/styled @mui/material @mui/system react @skodaflow/web-library
+
+# for yarn users
+yarn add @emotion/react @emotion/styled @mui/material @mui/system react @skodaflow/web-library
+```
+
+@mui/material is the peer dependency (minimal required version is 5.9.0).
+According to documentation, @mui/material has another peer dependency to @emotion, so you need to install all dependencies. For more details: https://mui.com/getting-started/installation/
+
+## Usage
+
+### Basic Usage
+
+Use theme provider in the root component of your application (eg. App.tsx).
+
+```tsx
+// use library provider
+import { SkodaThemeProvider } from '@skodaflow/web-library';
+...
+<SkodaThemeProvider>
+   <App/>
+</SkodaThemeProvider>
+
+// use MUI provider with custom theme
+// this allows to change skoda theme when needed
+import { skodaTheme } from '@skodaflow/web-library';
+import { ThemeProvider } from '@mui/material';
+...
+<ThemeProvider theme={skodaTheme}>
+   <App/>
+</ThemeProvider>
+```
+
+### Global Styles
+
+All content inside theme provider is now styled according to Skoda Flow Design System.
+Content out of the SkodaTheme will stay untouched. Skoda Flow Design System will be applied only on child elements.
+For global usage of foundation as typography, colors and effects variables out of the SkodaTheme wrapper include global stylesheet
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/globals.css";
+```
+
+### Fonts
+
+If your application is created from scratch without assets like a fonts, and these assets are not delivered to client by higher scope (any kind of Layout or runtime where is your application running), then you need to include Skoda Next font from @skodaflow/web-library.
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/fonts.css";
+```
+
+Please, take care about including Skoda Next font to your application, because it is the important part of Skoda Flow Design System.
+
+### Icons
+
+If your application need to use SkodaNext icon font, include icon font asset too.
+
+```tsx
+import "@skodaflow/web-library/theme/skoda/icons.css";
+```
+
+---
+
+For detailed documentation about Flow foundation visit:
+https://skodaauto.frontify.com/d/SCWeidKKNkoy/web
+
+For preview of components and Storybook visit:
+https://skodaflow-web.azurewebsites.net/

package/build/components/backdrop/backdrop.d.ts

@@ -39,4 +39,7 @@ export interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onClose?: (isOpen: boolean) => void;
 }
+/**
+ * @deprecated This component is deprecated. Use themed Backdrop component from @mui/material instead
+ */
 export declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLDivElement>>;

package/build/components/button/button.d.ts

@@ -52,5 +52,6 @@ export interface ButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement
  * Properties are inherited from HTML Button element.
  * @param props ButtonProps
  * @returns React Functional Component
+ * @deprecated Use Button component from '@mui/material' module instead.
  */
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/build/components/cardMenu/styled/menuListStyled.d.ts

@@ -15,7 +15,7 @@ export declare const MenuListStyled: import("@emotion/styled").StyledComponent<{
     sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof import("react").HTMLAttributes<HTMLUListElement>> & {
     ref?: import("react").Ref<HTMLUListElement>;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "autoFocus" | "autoFocusItem" | "disabledItemsFocusable" | "disableListWrap" | "variant" | "dense" | "disablePadding" | "subheader" | "sx"> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "autoFocus" | "children" | "autoFocusItem" | "disabledItemsFocusable" | "disableListWrap" | "variant" | "dense" | "disablePadding" | "subheader" | "sx"> & {
     theme?: import("@emotion/react").Theme;
 } & {
     theme?: any;

package/build/components/cardMenu/styled/popperStyled.d.ts

@@ -1,5 +1,14 @@
 /// <reference types="react" />
-export declare const PopperStyled: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Popper").PopperProps, "slot" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "anchorEl" | "container" | "disablePortal" | "keepMounted" | "modifiers" | "open" | "placement" | "popperOptions" | "popperRef" | "transition" | "sx"> & import("react").RefAttributes<HTMLDivElement> & {
+export declare const PopperStyled: import("@emotion/styled").StyledComponent<Omit<import("@mui/base").PopperProps<"div">, "direction"> & {
+    component?: import("react").ElementType<any>;
+    components?: {
+        Root?: import("react").ElementType<any>;
+    };
+    componentsProps?: {
+        root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps>;
+    };
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+} & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme;
 } & {
     theme?: any;

package/build/components/checkbox/checkbox.d.ts

@@ -50,5 +50,6 @@ export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLButtonEleme
  * Properties are inherited from HTML Button element.
  * @param props CheckboxProps
  * @returns React Functional Component
+ * @deprecated Use Checkbox component from '@mui/material' module instead.
  */
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;

package/build/components/chip/regular/chip.d.ts

@@ -35,5 +35,6 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
  * Properties are inherited from HTML Div element.
  * @param props ChipProps
  * @returns React Functional Component
+ * @deprecated This component is deprecated. Use themed Chip Component from @mui/material instead.
  */
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;

package/build/components/closeDialogButton/index.d.ts

@@ -0,0 +1,4 @@
+import { IconButtonProps } from '@mui/material';
+import React from 'react';
+export type CloseDialogButtonProps = Omit<IconButtonProps, 'children'>;
+export declare const CloseDialogButton: (props: CloseDialogButtonProps) => React.JSX.Element;

package/build/components/common/helperText.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface HelperTextProps {
     /**
      * Disabled, not clickable
@@ -25,5 +25,5 @@ export interface HelperTextProps {
      */
     type?: 'number' | 'text';
 }
-declare const HelperText: ({ disabled, hasError, helpText, maxChars, currentValue, type }: HelperTextProps) => JSX.Element;
+declare const HelperText: ({ disabled, hasError, helpText, maxChars, currentValue, type }: HelperTextProps) => React.JSX.Element;
 export default HelperText;

package/build/components/common/imageComponent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 interface ImageComponentProps {
     /**
      * The source of the image.
@@ -21,5 +21,5 @@ interface ImageComponentProps {
      */
     fallbackImage?: string;
 }
-declare const ImageComponent: ({ image, alt, fallbackImage, height, width }: ImageComponentProps) => JSX.Element;
+declare const ImageComponent: ({ image, alt, fallbackImage, height, width }: ImageComponentProps) => React.JSX.Element;
 export default ImageComponent;

package/build/components/common/resizableSliderInput.d.ts

@@ -13,5 +13,5 @@ export interface ResizableSliderInputInterface {
     decimalSeparator?: '.' | ',';
     hiddenDecimalSeparator?: boolean;
 }
-declare const ResizableSliderInput: ({ value: values, onChange, isCurrencyInFront, textDescription, labelText, className, id, thumb, disabled, thousandsSeparator, decimalSeparator, hiddenDecimalSeparator, }: ResizableSliderInputInterface) => JSX.Element;
+declare const ResizableSliderInput: ({ value: values, onChange, isCurrencyInFront, textDescription, labelText, className, id, thumb, disabled, thousandsSeparator, decimalSeparator, hiddenDecimalSeparator, }: ResizableSliderInputInterface) => React.JSX.Element;
 export default ResizableSliderInput;

package/build/components/common/styled/textFieldStyled.d.ts

@@ -1,23 +1,9 @@
 /**
  * @description TextInput styling definition based on props
  */
-declare const TextFieldStyled: import("@emotion/styled").StyledComponent<(import("@mui/material/TextField").StandardTextFieldProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    isSelect?: boolean;
-    disabled?: boolean;
-    hasError?: boolean;
-    hideBg?: boolean;
-    icon?: string;
-    focused?: boolean;
-    hovered?: boolean;
-}) | (import("@mui/material/TextField").FilledTextFieldProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    isSelect?: boolean;
-    disabled?: boolean;
-    hasError?: boolean;
-    hideBg?: boolean;
-    icon?: string;
-    focused?: boolean;
-    hovered?: boolean;
-}) | (import("@mui/material/TextField").OutlinedTextFieldProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+declare const TextFieldStyled: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material/TextField").TextFieldVariants;
+} & Omit<import("@mui/material/TextField").FilledTextFieldProps | import("@mui/material/TextField").OutlinedTextFieldProps | import("@mui/material/TextField").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & ((import("@mui/material/TextField").FilledTextFieldProps | import("@mui/material/TextField").OutlinedTextFieldProps | import("@mui/material/TextField").StandardTextFieldProps) & {
     isSelect?: boolean;
     disabled?: boolean;
     hasError?: boolean;

package/build/components/common/textInputHelperText.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export interface HelperTextProps {
     /**
      * Disabled, not clickable
@@ -26,5 +26,5 @@ export interface HelperTextProps {
     type?: 'number' | 'text';
     width?: string;
 }
-declare const TextInputHelperText: ({ disabled, hasError, helpText, maxChars, currentValue, type, width }: HelperTextProps) => JSX.Element;
+declare const TextInputHelperText: ({ disabled, hasError, helpText, maxChars, currentValue, type, width }: HelperTextProps) => React.JSX.Element;
 export default TextInputHelperText;

package/build/components/container/container.d.ts

@@ -3,6 +3,7 @@ import React, { ReactNode } from 'react';
  * @interface ContainerProps
  * @description Base definition of SkodaFlow Container independent on core implementation.
  * Properties are inherited from HTML Container element
+ * @deprecated this Component is deprecated. Use Container from @mui/material instead
  */
 export interface ContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'size'> {
     /**
@@ -41,4 +42,4 @@ export interface ContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement
  * @param props ContainerProps
  * @returns React Functional Component
  */
-export declare const Container: (props: any) => JSX.Element;
+export declare const Container: (props: any) => React.JSX.Element;

package/build/components/divider/divider.d.ts

@@ -23,5 +23,6 @@ export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
  * Properties are inherited from HTML HR Attribetes element.
  * @param props DividerProps
  * @returns React Functional Component
+ * @deprecated This component is deprecated. Use themed Divider component from '@mui/material' instead.
  */
 export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLHRElement>>;

package/build/components/grid/grid.d.ts

@@ -1,7 +1,7 @@
-import React, { ReactNode } from 'react';
+import { GridDirection, GridSize, GridSpacing } from '@mui/material/Grid';
 import { Theme } from '@mui/material/styles';
-import { GridSpacing, GridDirection, GridSize } from '@mui/material/Grid';
 import { ResponsiveStyleValue, SxProps } from '@mui/system';
+import React, { ReactNode } from 'react';
 /**
  * @interface GridProps
  * @description Base definition of SkodaFlow Grid independent on core implementation.
@@ -112,5 +112,6 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
  * @description SkodaFlow Grid component.
  * @param props GridProps
  * @returns React Functional Component
+ * @deprecated This component is deprecated. Use Grid and Container components from @mui/material
  */
 export declare const Grid: React.FC<GridProps>;