@epam/uui 5.7.1 → 5.8.0

package/assets/styles/typography.scss

@@ -1,174 +1,174 @@
-@mixin overflow-ellipsis() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.uui-typography {
-    font-family: var(--uui-font);
-    color: var(--uui-text-primary);
-
-    .hero-header, h1, h2, h3, h4, h5, h6 {
-        margin: 0;
-    }
-
-    .hero-header {
-        font-family: var(--uui-font);
-        font-weight: 500;
-        margin: 30px 0;
-        font-size: 66px;
-        line-height: 72px;
-    }
-
-    .promo-header, h1, h2, h3 {
-        font-family: var(--uui-font);
-        font-weight: 700;
-    }
-
-    h4, h5, h6 {
-        font-family: var(--uui-font);
-        font-weight: 600;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-        margin-bottom: 0.5em;
-        margin-top: 1.2em;
-        line-height: 1.35em;
-    }
-
-    h1 {
-        font-size: 42px;
-    }
-
-    h2 {
-        font-size: 30px;
-        letter-spacing: 0.1px;
-
-        .promo-header {
-            letter-spacing: 2px;
-        }
-    }
-
-    h3 {
-        font-size: 24px;
-    }
-
-    h4 {
-        font-size: 18px;
-        letter-spacing: 0.1px;
-    }
-
-    h5 {
-        font-size: 16px;
-    }
-
-    h6 {
-        font-size: 14px;
-    }
-
-    b, strong {
-        font-family: var(--uui-font);
-        font-weight: 600;
-    }
-
-    i, em {
-        font-family: var(--uui-font);
-        font-weight: 400;
-        font-style: italic;
-    }
-
-    a {
-        display: inline-flex;
-        align-items: center;
-        color: var(--uui-link);
-        text-decoration: underline;
-
-        &:visited {
-            color: var(--uui-link-visited);
-
-            &:hover {
-                color: var(--uui-link-visited-hover);
-            }
-        }
-
-        &:hover {
-            color: var(--uui-link-hover);
-        }
-    }
-
-    code {
-        padding: 0.125em 0.25em;
-        color: var(--uui-text-primary);
-        background-color: var(--uui-neutral-30);
-        font-family: var(--uui-font-mono, monospace);
-        font-weight: 400;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-
-    ol, ul {
-        padding: 0;
-    }
-
-    li {
-        margin-left: 1.25em;
-        line-height: 1.5;
-    }
-
-    pre {
-        padding: 1.25em;
-        font-family: monospace;
-        white-space: pre-wrap;
-        word-wrap: normal;
-    }
-
-    img {
-        max-width: 100%;
-    }
-
-    figure {
-        margin: 0;
-
-        figcaption {
-            font-size: 0.9em;
-            opacity: 0.9;
-            text-align: center;
-        }
-    }
-
-    p {
-        margin: 0.5em 0;
-        line-height: 1.5;
-    }
-
-    .uui-critical {
-        color: var(--uui-text-critical);
-    }
-
-    .uui-info {
-        color: var(--uui-text-info);
-    }
-
-    .uui-success {
-        color: var(--uui-text-success);
-    }
-
-    .uui-warning {
-        color: var(--uui-text-warning);
-    }
-
-    .uui-highlight {
-        background-color: var(--uui-warning-10);
-    }
-}
-
-.uui-typography-size-12 {
-    font-size: 12px;
-}
-
-.uui-typography-size-14 {
-    font-size: 14px;
-}
-
-.uui-typography-size-16 {
-    font-size: 16px;
-}
+@mixin overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.uui-typography {
+    font-family: var(--uui-font);
+    color: var(--uui-text-primary);
+
+    .hero-header, h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    .hero-header {
+        font-family: var(--uui-font);
+        font-weight: 500;
+        margin: 30px 0;
+        font-size: 66px;
+        line-height: 72px;
+    }
+
+    .promo-header, h1, h2, h3 {
+        font-family: var(--uui-font);
+        font-weight: 700;
+    }
+
+    h4, h5, h6 {
+        font-family: var(--uui-font);
+        font-weight: 600;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        margin-bottom: 0.5em;
+        margin-top: 1.2em;
+        line-height: 1.35em;
+    }
+
+    h1 {
+        font-size: 42px;
+    }
+
+    h2 {
+        font-size: 30px;
+        letter-spacing: 0.1px;
+
+        .promo-header {
+            letter-spacing: 2px;
+        }
+    }
+
+    h3 {
+        font-size: 24px;
+    }
+
+    h4 {
+        font-size: 18px;
+        letter-spacing: 0.1px;
+    }
+
+    h5 {
+        font-size: 16px;
+    }
+
+    h6 {
+        font-size: 14px;
+    }
+
+    b, strong {
+        font-family: var(--uui-font);
+        font-weight: 600;
+    }
+
+    i, em {
+        font-family: var(--uui-font);
+        font-weight: 400;
+        font-style: italic;
+    }
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        color: var(--uui-link);
+        text-decoration: underline;
+
+        &:visited {
+            color: var(--uui-link-visited);
+
+            &:hover {
+                color: var(--uui-link-visited-hover);
+            }
+        }
+
+        &:hover {
+            color: var(--uui-link-hover);
+        }
+    }
+
+    code {
+        padding: 0.125em 0.25em;
+        color: var(--uui-text-primary);
+        background-color: var(--uui-neutral-30);
+        font-family: var(--uui-font-mono, monospace);
+        font-weight: 400;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+
+    ol, ul {
+        padding: 0;
+    }
+
+    li {
+        margin-left: 1.25em;
+        line-height: 1.5;
+    }
+
+    pre {
+        padding: 1.25em;
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+
+    img {
+        max-width: 100%;
+    }
+
+    figure {
+        margin: 0;
+
+        figcaption {
+            font-size: 0.9em;
+            opacity: 0.9;
+            text-align: center;
+        }
+    }
+
+    p {
+        margin: 0.5em 0;
+        line-height: 1.5;
+    }
+
+    .uui-critical {
+        color: var(--uui-text-critical);
+    }
+
+    .uui-info {
+        color: var(--uui-text-info);
+    }
+
+    .uui-success {
+        color: var(--uui-text-success);
+    }
+
+    .uui-warning {
+        color: var(--uui-text-warning);
+    }
+
+    .uui-highlight {
+        background-color: var(--uui-warning-10);
+    }
+}
+
+.uui-typography-size-12 {
+    font-size: 12px;
+}
+
+.uui-typography-size-14 {
+    font-size: 14px;
+}
+
+.uui-typography-size-16 {
+    font-size: 16px;
+}

package/components/buttons/Button.d.ts

@@ -1,4 +1,6 @@
+/// <reference types="react" />
 import * as uuiComponents from '@epam/uui-components';
+import { Overwrite } from '@epam/uui-core';
 import { ControlSize } from '../types';
 type ButtonMods = {
     /**
@@ -15,17 +17,18 @@ type ButtonMods = {
      * Defines component color.
      * @default 'primary'
      */
-    color?: 'accent' | 'primary' | 'critical' | 'secondary' | 'neutral';
+    color?: 'accent' | 'primary' | 'critical' | 'secondary' | 'neutral' | 'white';
 };
+export interface ButtonModsOverride {
+}
 /** Represents the 'Core properties' for the Button component. */
 export type ButtonCoreProps = uuiComponents.ButtonProps;
 /** Represents the props for a Button component. */
-export type ButtonProps = ButtonMods & ButtonCoreProps;
-export declare const Button: (props: import("@epam/uui-core").IClickable & import("@epam/uui-core").IAnalyticableClick & import("@epam/uui-core").IHasTabIndex & import("@epam/uui-core").IDisableable & import("@epam/uui-core").IHasCX & import("@epam/uui-core").ICanRedirect & import("@epam/uui-core").IHasRawProps<uuiComponents.ClickableRawProps> & import("@epam/uui-core").IDropdownToggler & import("@epam/uui-core").IHasIcon & import("@epam/uui-core").IHasCaption & {
+export type ButtonProps = ButtonCoreProps & Overwrite<ButtonMods, ButtonModsOverride>;
+export declare const Button: import("react").ComponentType<import("@epam/uui-core").IClickable & import("@epam/uui-core").IAnalyticableClick & import("@epam/uui-core").IHasTabIndex & import("@epam/uui-core").IDisableable & import("@epam/uui-core").IHasCX & import("@epam/uui-core").ICanRedirect & import("@epam/uui-core").IHasRawProps<uuiComponents.ClickableRawProps> & import("@epam/uui-core").IDropdownToggler & import("@epam/uui-core").IHasIcon & import("@epam/uui-core").IHasCaption & {
     onClear?(e?: any): void;
     clearIcon?: import("@epam/uui-core").Icon;
-    captionCX?: import("@epam/uui-core").ClassValue;
     dropdownIcon?: import("@epam/uui-core").Icon;
-} & ButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+} & Omit<ButtonMods, never> & ButtonModsOverride & import("react").RefAttributes<any>>;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/components/buttons/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../components/buttons/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAMvC,KAAK,UAAU,GAAG;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,CAAC;CACvE,CAAC;AAEF,iEAAiE;AACjE,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC,WAAW,CAAC;AAExD,mDAAmD;AACnD,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,eAAe,CAAC;AAYvD,eAAO,MAAM,MAAM;;;;;8IAalB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../components/buttons/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAY,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAMvC,KAAK,UAAU,GAAG;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;CACjF,CAAC;AACF,MAAM,WAAW,kBAAkB;CAAG;AAEtC,iEAAiE;AACjE,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC,WAAW,CAAC;AAExD,mDAAmD;AACnD,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,SAAS,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;AAYtF,eAAO,MAAM,MAAM;;;;sFASlB,CAAC"}

package/components/buttons/IconButton.d.ts

@@ -1,10 +1,12 @@
+/// <reference types="react" />
 import * as uuiComponents from '@epam/uui-components';
+import { Overwrite } from '@epam/uui-core';
 interface IconButtonMods {
     /**
      * Defines component color.
      * @default 'neutral'
      */
-    color?: 'info' | 'success' | 'warning' | 'error' | 'secondary' | 'neutral';
+    color?: 'info' | 'success' | 'error' | 'primary' | 'accent' | 'critical' | 'warning' | 'secondary' | 'neutral' | 'white';
 }
 /** Represents the Core properties of the IconButton component. */
 export type IconButtonCoreProps = Omit<uuiComponents.IconButtonProps, 'size'> & {
@@ -13,13 +15,15 @@ export type IconButtonCoreProps = Omit<uuiComponents.IconButtonProps, 'size'> &
      */
     size?: '18' | '24' | '30' | '36';
 };
+export interface IconButtonModsOverride {
+}
 /** Represents the properties of the IconButton component. */
-export type IconButtonProps = IconButtonCoreProps & IconButtonMods;
-export declare const IconButton: (props: Omit<uuiComponents.IconButtonProps, "size"> & {
+export type IconButtonProps = IconButtonCoreProps & Overwrite<IconButtonMods, IconButtonModsOverride>;
+export declare const IconButton: import("react").ComponentType<Omit<uuiComponents.IconButtonProps, "size"> & {
     /**
      * Defines component size.
      */
     size?: '18' | '24' | '30' | '36';
-} & IconButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+} & Omit<IconButtonMods, never> & IconButtonModsOverride & import("react").RefAttributes<any>>;
 export {};
 //# sourceMappingURL=IconButton.d.ts.map

package/components/buttons/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAKtD,UAAU,cAAc;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;CAC9E;AAED,kEAAkE;AAClE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG;IAC5E;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF,6DAA6D;AAC7D,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,cAAc,CAAC;AAMnE,eAAO,MAAM,UAAU;IAbnB;;OAEG;WACI,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;kJAmBnC,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/IconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAY,SAAS,EAAa,MAAM,gBAAgB,CAAC;AAIhE,UAAU,cAAc;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;CAC5H;AAED,kEAAkE;AAClE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG;IAC5E;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACpC,CAAC;AAEF,MAAM,WAAW,sBAAsB;CAAG;AAE1C,6DAA6D;AAC7D,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,SAAS,CAAC,cAAc,EAAE,sBAAsB,CAAC,CAAC;AAMtG,eAAO,MAAM,UAAU;IAfnB;;OAEG;WACI,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI;8FA8BnC,CAAC"}

package/components/buttons/LinkButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CX, Icon, IDropdownToggler, IHasCaption, IHasIcon } from '@epam/uui-core';
+import { Icon, IDropdownToggler, IHasCaption, IHasIcon, Overwrite } from '@epam/uui-core';
 import { ClickableComponentProps } from '@epam/uui-components';
 import * as types from '../types';
 interface LinkButtonMods {
@@ -7,15 +7,10 @@ interface LinkButtonMods {
      * Defines component color.
      * @default 'primary'
      */
-    color?: 'primary' | 'secondary' | 'contrast';
+    color?: 'primary' | 'secondary' | 'accent' | 'critical' | 'white' | 'contrast';
 }
 /** Represents the Core properties of the LinkButton component. */
 export type LinkButtonCoreProps = ClickableComponentProps & IDropdownToggler & IHasIcon & IHasCaption & {
-    /**
-     * CSS classes to put on the caption
-     * @deprecated
-     * */
-    captionCX?: CX;
     /** Icon for drop-down toggler */
     dropdownIcon?: Icon;
     /**
@@ -24,14 +19,11 @@ export type LinkButtonCoreProps = ClickableComponentProps & IDropdownToggler & I
      */
     size?: types.ControlSize | '42';
 };
+export interface LinkButtonModsOverride {
+}
 /** Represents the properties of the LinkButton component. */
-export type LinkButtonProps = LinkButtonCoreProps & LinkButtonMods;
+export type LinkButtonProps = LinkButtonCoreProps & Overwrite<LinkButtonMods, LinkButtonModsOverride>;
 export declare const LinkButton: React.ForwardRefExoticComponent<import("@epam/uui-core").IClickable & import("@epam/uui-core").IAnalyticableClick & import("@epam/uui-core").IHasTabIndex & import("@epam/uui-core").IDisableable & import("@epam/uui-core").IHasCX & import("@epam/uui-core").ICanRedirect & import("@epam/uui-core").IHasRawProps<import("@epam/uui-components").ClickableRawProps> & IDropdownToggler & IHasIcon & IHasCaption & {
-    /**
-     * CSS classes to put on the caption
-     * @deprecated
-     * */
-    captionCX?: CX;
     /** Icon for drop-down toggler */
     dropdownIcon?: Icon;
     /**
@@ -39,6 +31,6 @@ export declare const LinkButton: React.ForwardRefExoticComponent<import("@epam/u
      * @default '36'
      */
     size?: types.ControlSize | '42';
-} & LinkButtonMods & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<LinkButtonMods, never> & LinkButtonModsOverride & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=LinkButton.d.ts.map

package/components/buttons/LinkButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,EAAE,EAAiB,IAAI,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAc,MAAM,gBAAgB,CAAC;AAC9G,OAAO,EAAa,uBAAuB,EAAiB,MAAM,sBAAsB,CAAC;AACzF,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAQlC,UAAU,cAAc;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;CAChD;AAED,kEAAkE;AAClE,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,GAAG,WAAW,GAAG;IACpG;;;SAGK;IACL,SAAS,CAAC,EAAE,EAAE,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,6DAA6D;AAC7D,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,cAAc,CAAC;AAYnE,eAAO,MAAM,UAAU;IA3BnB;;;SAGK;gBACO,EAAE;IACd,iCAAiC;mBAClB,IAAI;IACnB;;;OAGG;WACI,MAAM,WAAW,GAAG,IAAI;gFAmDjC,CAAC"}
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAa,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAc,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACjH,OAAO,EAAa,uBAAuB,EAAiB,MAAM,sBAAsB,CAAC;AACzF,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAQlC,UAAU,cAAc;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;CAClF;AAED,kEAAkE;AAClE,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,GAAG,WAAW,GAAG;IACpG,iCAAiC;IACjC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,WAAW,sBAAsB;CAAG;AAE1C,6DAA6D;AAC7D,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,SAAS,CAAC,cAAc,EAAE,sBAAsB,CAAC,CAAC;AAYtG,eAAO,MAAM,UAAU;IAxBnB,iCAAiC;mBAClB,IAAI;IACnB;;;OAGG;WACI,MAAM,WAAW,GAAG,IAAI;sHA2DjC,CAAC"}

package/components/buttons/TabButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CX, Icon, IDropdownToggler, IHasCaption, IHasIcon } from '@epam/uui-core';
+import { Icon, IDropdownToggler, IHasCaption, IHasIcon, Overwrite } from '@epam/uui-core';
 import { ClickableComponentProps } from '@epam/uui-components';
 type TabButtonMods = {
     /**
@@ -10,32 +10,24 @@ type TabButtonMods = {
     /** Defines is the component showing Notify */
     withNotify?: boolean;
 };
+export interface TabButtonModsOverride {
+}
 /** Represents the properties of a TabButton component. */
-export type TabButtonProps = TabButtonMods & ClickableComponentProps & IDropdownToggler & IHasIcon & IHasCaption & {
+export type TabButtonProps = Overwrite<TabButtonMods, TabButtonModsOverride> & ClickableComponentProps & IDropdownToggler & IHasIcon & IHasCaption & {
     /** Call to clear toggler value */
     onClear?(e?: any): void;
     /** Icon for clear value button (usually cross) */
     clearIcon?: Icon;
-    /**
-     * CSS classes to put on the caption
-     * @deprecated
-     * */
-    captionCX?: CX;
     /** Icon for drop-down toggler */
     dropdownIcon?: Icon;
     /** Count value to be placed in component */
     count?: React.ReactNode;
 };
-export declare const TabButton: React.ForwardRefExoticComponent<TabButtonMods & import("@epam/uui-core").IClickable & import("@epam/uui-core").IAnalyticableClick & import("@epam/uui-core").IHasTabIndex & import("@epam/uui-core").IDisableable & import("@epam/uui-core").IHasCX & import("@epam/uui-core").ICanRedirect & import("@epam/uui-core").IHasRawProps<import("@epam/uui-components").ClickableRawProps> & IDropdownToggler & IHasIcon & IHasCaption & {
+export declare const TabButton: React.ForwardRefExoticComponent<Omit<TabButtonMods, never> & TabButtonModsOverride & import("@epam/uui-core").IClickable & import("@epam/uui-core").IAnalyticableClick & import("@epam/uui-core").IHasTabIndex & import("@epam/uui-core").IDisableable & import("@epam/uui-core").IHasCX & import("@epam/uui-core").ICanRedirect & import("@epam/uui-core").IHasRawProps<import("@epam/uui-components").ClickableRawProps> & IDropdownToggler & IHasIcon & IHasCaption & {
     /** Call to clear toggler value */
     onClear?(e?: any): void;
     /** Icon for clear value button (usually cross) */
     clearIcon?: Icon;
-    /**
-     * CSS classes to put on the caption
-     * @deprecated
-     * */
-    captionCX?: CX;
     /** Icon for drop-down toggler */
     dropdownIcon?: Icon;
     /** Count value to be placed in component */

package/components/buttons/TabButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/TabButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,EAAE,EAAiB,IAAI,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAA0B,MAAM,gBAAgB,CAAC;AAC1H,OAAO,EAAa,uBAAuB,EAAiB,MAAM,sBAAsB,CAAC;AAMzF,KAAK,aAAa,GAAG;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,0DAA0D;AAC1D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,GAAG,WAAW,GAAG;IAC/G,kCAAkC;IAClC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB;;;SAGK;IACL,SAAS,CAAC,EAAE,EAAE,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAYF,eAAO,MAAM,SAAS;IAzBlB,kCAAkC;iBACrB,GAAG,GAAG,IAAI;IACvB,kDAAkD;gBACtC,IAAI;IAChB;;;SAGK;gBACO,EAAE;IACd,iCAAiC;mBAClB,IAAI;IACnB,4CAA4C;YACpC,MAAM,SAAS;iFAiEzB,CAAC"}
+{"version":3,"file":"TabButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/TabButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,IAAI,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAA0B,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtH,OAAO,EAAa,uBAAuB,EAAiB,MAAM,sBAAsB,CAAC;AAMzF,KAAK,aAAa,GAAG;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8CAA8C;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,WAAW,qBAAqB;CAAG;AAEzC,0DAA0D;AAC1D,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,aAAa,EAAE,qBAAqB,CAAC,GAAG,uBAAuB,GAAG,gBAAgB,GAAG,QAAQ,GAAG,WAAW,GAAG;IACjJ,kCAAkC;IAClC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,iCAAiC;IACjC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,SAAS;IAVlB,kCAAkC;iBACrB,GAAG,GAAG,IAAI;IACvB,kDAAkD;gBACtC,IAAI;IAChB,iCAAiC;mBAClB,IAAI;IACnB,4CAA4C;YACpC,MAAM,SAAS;iFA0DzB,CAAC"}

package/components/buttons/VerticalTabButton.d.ts

@@ -1,14 +1,14 @@
+/// <reference types="react" />
 import { TabButtonProps } from './TabButton';
 /** Represents the properties of a VerticalTabButton component. */
 export type VerticalTabButtonProps = TabButtonProps;
-export declare const VerticalTabButton: (props: {
+export declare const VerticalTabButton: import("react").ComponentType<Omit<{
     size?: "36" | "48" | "60";
     withNotify?: boolean;
-} & import("@epam/uui-core").IClickable & import("@epam/uui-core").IAnalyticableClick & import("@epam/uui-core").IHasTabIndex & import("@epam/uui-core").IDisableable & import("@epam/uui-core").IHasCX & import("@epam/uui-core").ICanRedirect & import("@epam/uui-core").IHasRawProps<import("@epam/uui-components").ClickableRawProps> & import("@epam/uui-core").IDropdownToggler & import("@epam/uui-core").IHasIcon & import("@epam/uui-core").IHasCaption & {
+}, never> & import("./TabButton").TabButtonModsOverride & import("@epam/uui-core").IClickable & import("@epam/uui-core").IAnalyticableClick & import("@epam/uui-core").IHasTabIndex & import("@epam/uui-core").IDisableable & import("@epam/uui-core").IHasCX & import("@epam/uui-core").ICanRedirect & import("@epam/uui-core").IHasRawProps<import("@epam/uui-components").ClickableRawProps> & import("@epam/uui-core").IDropdownToggler & import("@epam/uui-core").IHasIcon & import("@epam/uui-core").IHasCaption & {
     onClear?(e?: any): void;
     clearIcon?: import("@epam/uui-core").Icon;
-    captionCX?: import("@epam/uui-core").ClassValue;
     dropdownIcon?: import("@epam/uui-core").Icon;
     count?: import("react").ReactNode;
-} & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+} & import("react").RefAttributes<any>>;
 //# sourceMappingURL=VerticalTabButton.d.ts.map

package/components/buttons/VerticalTabButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/VerticalTabButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAOxD,kEAAkE;AAClE,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;;;;;;;;iIAA0E,CAAC"}
+{"version":3,"file":"VerticalTabButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/VerticalTabButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AAOxD,kEAAkE;AAClE,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,iBAAiB;;;;;;;;uCAAkG,CAAC"}

package/components/datePickers/Calendar.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { CalendarProps } from '@epam/uui-components';
-import { Dayjs } from 'dayjs';
+import { Dayjs } from '../../helpers/dayJsHelper';
 export declare function applyDateSelectionMods(): string[];
-export declare const Calendar: (props: CalendarProps<Dayjs> & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const Calendar: import("react").ComponentType<CalendarProps<Dayjs> & import("react").RefAttributes<any>>;
 //# sourceMappingURL=Calendar.d.ts.map

package/components/datePickers/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../components/datePickers/Calendar.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,wBAAgB,sBAAsB,aAErC;AAED,eAAO,MAAM,QAAQ,8JAAsE,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../components/datePickers/Calendar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAA2B,MAAM,sBAAsB,CAAC;AAE9E,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,wBAAgB,sBAAsB,aAErC;AAED,eAAO,MAAM,QAAQ,0FAA4F,CAAC"}

package/components/datePickers/CalendarPresets.d.ts

@@ -1,4 +1,5 @@
+/// <reference types="react" />
 import { CalendarPresetsProps } from '@epam/uui-components';
 export declare function applyCalendarPresetsMods(): string[];
-export declare const CalendarPresets: (props: CalendarPresetsProps & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const CalendarPresets: import("react").ComponentType<CalendarPresetsProps & import("react").RefAttributes<any>>;
 //# sourceMappingURL=CalendarPresets.d.ts.map

package/components/datePickers/CalendarPresets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarPresets.d.ts","sourceRoot":"","sources":["../../../components/datePickers/CalendarPresets.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyC,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGnG,wBAAgB,wBAAwB,aAEvC;AAED,eAAO,MAAM,eAAe,8JAA2F,CAAC"}
+{"version":3,"file":"CalendarPresets.d.ts","sourceRoot":"","sources":["../../../components/datePickers/CalendarPresets.tsx"],"names":[],"mappings":";AACA,OAAO,EAAyC,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAGnG,wBAAgB,wBAAwB,aAEvC;AAED,eAAO,MAAM,eAAe,0FAAiH,CAAC"}

package/components/datePickers/DatePicker.d.ts

@@ -1,12 +1,5 @@
 import React from 'react';
-import { DatePickerCoreProps } from '@epam/uui-core';
-import { SizeMod, IHasEditMode } from '../types';
-/** Represents the properties of the DatePicker component. */
-export interface DatePickerProps extends DatePickerCoreProps, SizeMod, IHasEditMode {
-    /**
-    * HTML ID attribute for the toggler input
-    */
-    id?: string;
-}
-export declare const DatePicker: (props: DatePickerProps & React.RefAttributes<any>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+import { DatePickerProps } from './types';
+export declare function DatePickerComponent(props: DatePickerProps, ref: React.ForwardedRef<HTMLElement>): JSX.Element;
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=DatePicker.d.ts.map

package/components/datePickers/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../components/datePickers/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAM,mBAAmB,EAAoE,MAAM,gBAAgB,CAAC;AAE3H,OAAO,EAAY,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAQ3D,6DAA6D;AAC7D,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,EAAE,OAAO,EAAE,YAAY;IAC/E;;MAEE;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;CACf;AA8DD,eAAO,MAAM,UAAU,2HAAgC,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../components/datePickers/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AASnD,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAY1C,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,eAoH/F;AAED,eAAO,MAAM,UAAU,qFAAwC,CAAC"}