@epam/uui 4.10.0 → 4.11.0-alpha.0

package/assets/styles/controlLayout.scss

@@ -5,6 +5,22 @@
         @include text-size($size, $borderWidth);
     }
 
+    &:global(.uui-button-box), &:global(.uui-input-box) {
+        min-height: $size;
+        border-width: $borderWidth;
+    }
+}
+
+@mixin control-box-layout($size, $borderWidth) {
+    min-width: $size;
+    padding-left: 5px;
+    padding-right: 5px;
+
+    :global(.uui-caption), :global(.uui-input) {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+
     &:global(.uui-button-box), &:global(.uui-input-box) {
         min-height: $size;
         border-width: $borderWidth;

package/assets/styles/effects.scss

@@ -1,4 +1,4 @@
-@mixin panel-shadow() { box-shadow: var(--panel-shadow); }
+@mixin panel-shadow() { box-shadow: var(--uui-panel-shadow); }
 
 @mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
 
@@ -6,4 +6,5 @@
 
 @mixin dnd-ghost-shadow() { box-shadow: 0 6px 18px 0 rgba(29,30,38,0.05), 0 3px 12px 0 rgba(29,30,38,0.05); }
 
-@mixin control-focus-effect($name) { box-shadow: 0 0 0 2px fade-out($name, 0.6); } // TODO: design?
+//@mixin control-focus-effect($name) { box-shadow: 0 0 0 2px fade-out($name, 0.6); } // TODO: design?
+@mixin control-focus-effect() { box-shadow: 0 0 0 2px rgba(0, 137 ,204, 0.40); }

package/assets/styles/inputs.scss

@@ -1,43 +1,43 @@
 @mixin disabled-input() {
     &.mode-form {
-        @include input-colors(var(--input-bg-disabled-color), var(--input-text-disabled-color), var(--input-border-disabled-color));
+        @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled));
         cursor: default;
         pointer-events: none;
 
         &:hover, &:active, &:focus {
-            @include input-colors(var(--input-bg-disabled-color), var(--input-text-disabled-color), var(--input-border-disabled-color));
+            @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled));
             box-shadow: none;
         }
 
         &::placeholder {
-            color: var(--input-placeholder-disabled-color);
+            color: var(--uui-control-placeholder-disabled);
         }
     }
 
     &.mode-cell {
-        @include input-colors(transparent, var(--input-text-disabled-color), transparent);
+        @include input-colors(transparent, var(--uui-control-text-disabled), transparent);
         cursor: default;
         pointer-events: none;
 
         &:hover, &:active, &:focus {
-            @include input-colors(transparent, var(--input-text-disabled-color), transparent);
+            @include input-colors(transparent, var(--uui-control-text-disabled), transparent);
             box-shadow: none;
         }
 
         &::placeholder {
-            color: var(--input-placeholder-disabled-color);
+            color: var(--uui-control-placeholder-disabled);
         }
     }
 }
 
 @mixin readonly-input() {
     &.mode-form {
-        background-color: var(--input-bg-readonly-color);
-        border-color: var(--input-border-readonly-color);
+        background-color: var(--uui-control-bg-readonly);
+        border-color: var(--uui-control-border-readonly);
         pointer-events: none;
 
         &:hover {
-            border-color: var(--input-border-readonly-color);
+            border-color: var(--uui-control-border-readonly);
         }
     }
 
@@ -64,7 +64,7 @@
         color: $fg;
 
         &::placeholder {
-            color: var(--input-placeholder-disabled-color);
+            color: var(--uui-control-placeholder-disabled);
         }
     }
 }

package/assets/styles/prettifyScrollBar.scss

@@ -1,6 +1,14 @@
 @mixin prettifyCustomScroll() {
+    :global(.uui-shadow-top)::before {
+        background: var(--scroll-bars-shadow);
+    }
+
+    :global(.uui-shadow-bottom)::after {
+        background: var(--scroll-bars-shadow);
+    }
+
     :global(.uui-thumb-vertical), :global(.uui-thumb-horizontal) {
-        background: var(--scroll-bars-bg-color);
+        background: var(--uui-scroll-bars-bg);
         border-radius: 1.5px;
 
         &:hover {
@@ -9,7 +17,7 @@
 
         &:active {
             border-radius: 3px;
-            background: var(--scroll-bars-bg-color-active);
+            background: var(--uui-scroll-bars-bg-active);
         }
     }
 

package/assets/styles/variables/layout/accordion.scss

@@ -1,10 +1,10 @@
 :global(.accordion-vars) {
-    --accordion-bg-color: var(--surface-color);
-    --accordion-border-color: var(--divider-color);
-    --accordion-text-color: var(--text-primary-color);
-    --accordion-text-color-disabled: var(--text-disabled-color);
-    --accordion-icon-color: var(--icon-color);
-    --accordion-icon-color-disabled: var(--icon-disabled-color);
-    --accordion-shadow: 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 1px 3px 0 rgba(29, 30, 38, 0.10);
-    --accordion-shadow-hovered: 0 6px 12px 0 rgba(29, 30, 38, 0.10), 0 3px 6px 0 rgba(29, 30, 38, 0.10);
+    --uui-accordion-bg: var(--uui-surface);
+    --uui-accordion-border: var(--uui-divider);
+    --uui-accordion-text: var(--uui-text-primary);
+    --uui-accordion-text-disabled: var(--uui-text-disabled);
+    --uui-accordion-icon: var(--uui-icon);
+    --uui-accordion-icon-disabled: var(--uui-icon-disabled);
+    --uui-accordion-shadow: 0 3px 6px 0 rgba(29, 30, 38, 0.10), 0 1px 3px 0 rgba(29, 30, 38, 0.10);
+    --uui-accordion-shadow-hovered: 0 6px 12px 0 rgba(29, 30, 38, 0.10), 0 3px 6px 0 rgba(29, 30, 38, 0.10);
 }

package/assets/styles/variables/overlays/dropdownContainer.scss

@@ -1,5 +1,5 @@
 :global(.dropdown-container-vars) {
     //noinspection CssInvalidFunction
-    --dropdown-container-shadow: var(--shadow, 0 3px 6px 0 rgba(29, 30, 38, 0.1), 0 1px 3px 0 rgba(29, 30, 38, 0.1));
-    --dropdown-container-scrollbar-thumb-color: #6C6F80;
+    --uui-dropdown-container-shadow: var(--uui-shadow, 0 3px 6px 0 rgba(29, 30, 38, 0.1), 0 1px 3px 0 rgba(29, 30, 38, 0.1));
+    --uui-dropdown-container-scrollbar-thumb: #6C6F80;
 }

package/assets/styles/variables/overlays/notificationCard.scss

@@ -1,28 +1,28 @@
 :global(.notification-card-vars) {
-    --notification-card-border-radius: var(--border-radius);
-    --notification-card-border-width: 6px 1px 1px;
+    --uui-notification-card-border-radius: var(--uui-border-radius);
+    --uui-notification-card-border-width: 6px 1px 1px;
 }
 
 :global(.notification-card-color-warning) {
-    --notification-card-fill-color: var(--warning-color);
-    --notification-card-border-color: var(--warning-color);
-    --notification-card-bg-color: white;
+    --uui-notification-card-fill: var(--uui-warning);
+    --uui-notification-card-border: var(--uui-warning);
+    --uui-notification-card-bg: white;
 }
 
 :global(.notification-card-color-success) {
-    --notification-card-fill-color: var(--success-color);
-    --notification-card-border-color: var(--success-color);
-    --notification-card-bg-color: white;
+    --uui-notification-card-fill: var(--uui-success);
+    --uui-notification-card-border: var(--uui-success);
+    --uui-notification-card-bg: white;
 }
 
 :global(.notification-card-color-info) {
-    --notification-card-fill-color: var(--info-color);
-    --notification-card-border-color: var(--info-color);
-    --notification-card-bg-color: white;
+    --uui-notification-card-fill: var(--uui-info);
+    --uui-notification-card-border: var(--uui-info);
+    --uui-notification-card-bg: white;
 }
 
 :global(.notification-card-color-error) {
-    --notification-card-fill-color: var(--error-color);
-    --notification-card-border-color: var(--error-color);
-    --notification-card-bg-color: white;
+    --uui-notification-card-fill: var(--uui-error);
+    --uui-notification-card-border: var(--uui-error);
+    --uui-notification-card-bg: white;
 }

package/assets/styles/variables/typography/text.scss

@@ -1,19 +1,19 @@
 :global(.text-color-brand) {
-    --text-color: var(--text-brand-color);
+    --uui-text: var(--uui-text-brand);
 }
 
 :global(.text-color-primary) {
-    --text-color: var(--text-primary-color);
+    --uui-text: var(--uui-text-primary);
 }
 
 :global(.text-color-secondary) {
-    --text-color: var(--text-secondary-color);
+    --uui-text: var(--uui-text-secondary);
 }
 
 :global(.text-color-disabled) {
-    --text-color: var(--text-disabled-color);
+    --uui-text: var(--uui-text-disabled);
 }
 
 :global(.text-color-contrast) {
-    --text-color: var(--text-contrast-color);
+    --uui-text: var(--uui-text-contrast);
 }

package/assets/styles/variables/typography/textPlaceholder.scss

@@ -1,4 +1,4 @@
 :global(.text-placeholder-vars) {
-    --text-placeholder-gradient: var(--skeleton-gradient);
-    --text-placeholder-color: var(--skeleton-color);
+    --uui-text-placeholder-gradient: var(--uui-skeleton-gradient);
+    --uui-text-placeholder: var(--uui-skeleton);
 }

package/assets/styles/variables/widgets/badge.scss

@@ -1,51 +1,51 @@
-:global(.badge-color-info) {
-    --badge-bg-color: var(--info-color);
-    --badge-bg-color-hover: var(--info-active-color);
+:global(.badge-info) {
+    --uui-badge-bg: var(--uui-info);
+    --uui-badge-bg-hover: var(--uui-info-active);
     //--bg-color-semitransparent: #{lighten(#008ACE, 50%)};
     //--border-color-semitransparent: #{lighten($blue, 40%)};
-    --badge-caption-color-solid: white;
-    //--caption-color-semitransparent: #{darken($blue, 10%)};
-    //--caption-color-semitransparent-hover: #{darken($blue, 20%)};
-    //--caption-color-transparent: #{$gray80};
-    --badge-count-bg-color: white;
-    --badge-count-color: var(--text-secondary-color);
+    --uui-badge-caption-solid: white;
+    //--uui-caption-semitransparent: #{darken($blue, 10%)};
+    //--uui-caption-semitransparent-hover: #{darken($blue, 20%)};
+    //--uui-caption-transparent: #{$gray80};
+    --uui-badge-count-bg: white;
+    --uui-badge-count: var(--uui-text-secondary);
 }
 
-:global(.badge-color-success) {
-    --badge-bg-color: var(--success-color);
-    --badge-bg-color-hover: var(--success-active-color);
+:global(.badge-success) {
+    --uui-badge-bg: var(--uui-success);
+    --uui-badge-bg-hover: var(--uui-success-active);
     //--bg-color-semitransparent: #{$cyan-lightest};
     //--border-color-semitransparent: #{$cyan-light};
-    --badge-caption-color-solid: white;
-    //--caption-color-semitransparent: #{$cyan-dark};
-    //--caption-color-semitransparent-hover: #{$cyan-darkest};
-    //--caption-color-transparent: #{$gray80};
-    --badge-count-bg-color: white;
-    --badge-count-color: var(--text-secondary-color);
+    --uui-badge-caption-solid: white;
+    //--uui-caption-semitransparent: #{$cyan-dark};
+    //--uui-caption-semitransparent-hover: #{$cyan-darkest};
+    //--uui-caption-transparent: #{$gray80};
+    --uui-badge-count-bg: white;
+    --uui-badge-count: var(--uui-text-secondary);
 }
 
-:global(.badge-color-warning) {
-    --badge-bg-color: var(--warning-color);
-    --badge-bg-color-hover: var(--warning-active-color);
+:global(.badge-warning) {
+    --uui-badge-bg: var(--uui-warning);
+    --uui-badge-bg-hover: var(--uui-warning-active);
     //--bg-color-semitransparent: #{lighten($green, 50%)};
     //--border-color-semitransparent: #{lighten($green, 40%)};
-    --badge-caption-color-solid: white;
-    //--caption-color-semitransparent: #{darken($green, 10%)};
-    //--caption-color-semitransparent-hover: #{darken($green, 20%)};
-    //--caption-color-transparent: #{$gray80};
-    --badge-count-bg-color: white;
-    --badge-count-color: var(--text-secondary-color);
+    --uui-badge-caption-solid: white;
+    //--uui-caption-semitransparent: #{darken($green, 10%)};
+    //--uui-caption-semitransparent-hover: #{darken($green, 20%)};
+    //--uui-caption-transparent: #{$gray80};
+    --uui-badge-count-bg: white;
+    --uui-badge-count: var(--uui-text-secondary);
 }
 
-:global(.badge-color-error) {
-    --badge-bg-color: var(--error-color);
-    --badge-bg-color-hover: var(--error-active-color);
+:global(.badge-error) {
+    --uui-badge-bg: var(--uui-error);
+    --uui-badge-bg-hover: var(--uui-error-active);
     //--bg-color-semitransparent: #{lighten($amber, 40%)};
     //--border-color-semitransparent: #{lighten($amber, 30%)};
-    --badge-caption-color-solid: var(--text-primary-color);
-    //--caption-color-semitransparent: #995A00;
-    //--caption-color-semitransparent-hover: #804000;
-    //--caption-color-transparent: #{$gray80};
-    --badge-count-bg-color: white;
-    --badge-count-color: var(--text-secondary-color);
+    --uui-badge-caption-solid: var(--uui-text-primary);
+    //--uui-caption-semitransparent: #995A00;
+    //--uui-caption-semitransparent-hover: #804000;
+    //--uui-caption-transparent: #{$gray80};
+    --uui-badge-count-bg: white;
+    --uui-badge-count: var(--uui-text-secondary);
 }

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

@@ -0,0 +1,13 @@
+import { ButtonProps as uuiButtonProps } from '@epam/uui-components';
+import { ControlSize, ButtonMode } from '../../types';
+export type ButtonColor = 'accent' | 'primary' | 'secondary' | 'negative';
+export declare const allButtonColors: ButtonColor[];
+export interface ButtonMods {
+    size?: ControlSize | '18';
+    mode?: ButtonMode;
+    color?: ButtonColor;
+}
+export type ButtonProps = ButtonMods & uuiButtonProps;
+export declare function applyButtonMods(mods: ButtonProps): string[];
+export declare const Button: (props: uuiButtonProps & ButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../components/buttons/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,WAAW,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE1F,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAItD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC1E,eAAO,MAAM,eAAe,EAAE,WAAW,EAAmD,CAAC;AAI7F,MAAM,WAAW,UAAU;IACvB,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;CACvB;AAED,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,cAAc,CAAC;AAEtD,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,YAOhD;AAED,eAAO,MAAM,MAAM,qKAOlB,CAAC"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Button.test.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.test.d.ts","sourceRoot":"","sources":["../../../../components/buttons/Button/Button.test.tsx"],"names":[],"mappings":""}

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

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/buttons/Button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/components/buttons/IconButton.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
 import { IconButtonBaseProps } from '@epam/uui-components';
-import '../../assets/styles/variables/buttons/iconButton.scss';
 export type IconColor = 'info' | 'success' | 'warning' | 'error' | 'secondary' | 'default';
 export declare const allIconColors: IconColor[];
 export interface IconButtonMods {
@@ -8,5 +6,5 @@ export interface IconButtonMods {
 }
 export interface IconButtonProps extends IconButtonBaseProps, IconButtonMods {
 }
-export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & IconButtonMods & import("react").RefAttributes<any>>;
+export declare const IconButton: (props: IconButtonProps & IconButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# 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,EAAE,mBAAmB,EAA+B,MAAM,sBAAsB,CAAC;AAExF,OAAO,uDAAuD,CAAC;AAG/D,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;AAC3F,eAAO,MAAM,aAAa,EAAE,SAAS,EAAoE,CAAC;AAE1G,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,EAAE,cAAc;CAAI;AAShF,eAAO,MAAM,UAAU,kHAAgF,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAA+B,MAAM,sBAAsB,CAAC;AAIxF,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;AAC3F,eAAO,MAAM,aAAa,EAAE,SAAS,EAAoE,CAAC;AAE1G,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,EAAE,cAAc;CAAG;AAS/E,eAAO,MAAM,UAAU,0KAAgF,CAAC"}

package/components/buttons/LinkButton.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { ButtonProps } from '@epam/uui-components';
 import * as types from '../types';
-import '../../assets/styles/variables/buttons/linkButton.scss';
+import { ButtonProps } from '@epam/uui-components';
 export interface LinkButtonMods {
     size?: types.ControlSize | '42';
 }
-export declare const LinkButton: import("react").ForwardRefExoticComponent<Pick<ButtonProps & LinkButtonMods, "isDisabled" | "onClick" | "link" | "caption" | "dropdownIcon" | "dropdownIconPosition" | "countPosition" | "count" | "cx" | "href" | "isLinkActive" | "target" | "icon" | "iconPosition" | "onIconClick" | "clickAnalyticsEvent" | "tabIndex" | "rawProps" | "onClear" | "isOpen" | "isDropdown" | "toggleDropdownOpening" | "isInteractedOutside" | "placeholder" | "size" | "forwardedRef" | "clearIcon" | "captionCX"> & import("react").RefAttributes<any>>;
+export type LinkButtonProps = LinkButtonMods & ButtonProps;
+export declare const LinkButton: (props: ButtonProps & LinkButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# 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":";AACA,OAAO,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAG3D,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAElC,OAAO,uDAAuD,CAAC;AAI/D,MAAM,WAAW,cAAc;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;CACnC;AAWD,eAAO,MAAM,UAAU,+gBAGpB,CAAC"}
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAElC,OAAO,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAO3D,MAAM,WAAW,cAAc;IAC3B,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC;CACnC;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,WAAW,CAAC;AAU3D,eAAO,MAAM,UAAU,sKAGpB,CAAC"}

package/components/buttons/TabButton.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { ButtonProps } from '@epam/uui-components';
-import '../../assets/styles/variables/buttons/tabButton.scss';
 export interface TabButtonMods {
     size?: '36' | '48' | '60';
     withNotify?: boolean;
 }
-export declare const TabButton: import("react").ForwardRefExoticComponent<Pick<ButtonProps & TabButtonMods, "isDisabled" | "onClick" | "link" | "caption" | "dropdownIcon" | "dropdownIconPosition" | "countPosition" | "count" | "cx" | "href" | "isLinkActive" | "target" | "icon" | "iconPosition" | "onIconClick" | "clickAnalyticsEvent" | "tabIndex" | "rawProps" | "onClear" | "isOpen" | "isDropdown" | "toggleDropdownOpening" | "isInteractedOutside" | "placeholder" | "forwardedRef" | "clearIcon" | "captionCX" | keyof TabButtonMods> & import("react").RefAttributes<any>>;
+export type TabButtonProps = TabButtonMods & ButtonProps;
+export declare const TabButton: (props: ButtonProps & TabButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=TabButton.d.ts.map

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,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAI3D,OAAO,sDAAsD,CAAC;AAG9D,MAAM,WAAW,aAAa;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,SAAS,2hBAMnB,CAAC"}
+{"version":3,"file":"TabButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/TabButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAM3D,MAAM,WAAW,aAAa;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG,WAAW,CAAC;AAWzD,eAAO,MAAM,SAAS,qKAMnB,CAAC"}

package/components/buttons/VerticalTabButton.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { ButtonProps } from '@epam/uui-components';
 import { TabButtonMods } from './TabButton';
-export declare const VerticalTabButton: import("react").ForwardRefExoticComponent<Pick<ButtonProps & TabButtonMods, "isDisabled" | "onClick" | "link" | "caption" | "dropdownIcon" | "dropdownIconPosition" | "countPosition" | "count" | "cx" | "href" | "isLinkActive" | "target" | "icon" | "iconPosition" | "onIconClick" | "clickAnalyticsEvent" | "tabIndex" | "rawProps" | "onClear" | "isOpen" | "isDropdown" | "toggleDropdownOpening" | "isInteractedOutside" | "placeholder" | "forwardedRef" | "clearIcon" | "captionCX" | keyof TabButtonMods> & import("react").RefAttributes<any>>;
+export type VerticalTabButtonProps = ButtonProps & TabButtonMods;
+export declare const VerticalTabButton: (props: ButtonProps & TabButtonMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<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":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAa,aAAa,EAAE,MAAM,aAAa,CAAC;AAQvD,eAAO,MAAM,iBAAiB,2hBAA+E,CAAC"}
+{"version":3,"file":"VerticalTabButton.d.ts","sourceRoot":"","sources":["../../../components/buttons/VerticalTabButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAa,aAAa,EAAE,MAAM,aAAa,CAAC;AAQvD,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,aAAa,CAAC;AAEjE,eAAO,MAAM,iBAAiB,qKAA0E,CAAC"}

package/components/buttons/index.d.ts

@@ -1,4 +1,4 @@
-export * from './Button';
+export * from './Button/Button';
 export * from './IconButton';
 export * from './LinkButton';
 export * from './TabButton';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/buttons/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/buttons/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC"}

package/components/datePickers/Calendar.d.ts

@@ -0,0 +1,5 @@
+import { CalendarProps } from '@epam/uui-components';
+import { Dayjs } from 'dayjs';
+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>>;
+//# sourceMappingURL=Calendar.d.ts.map

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

@@ -0,0 +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,aAIrC;AAED,eAAO,MAAM,QAAQ,8JAAsE,CAAC"}

package/components/datePickers/CalendarPresets.d.ts

@@ -0,0 +1,4 @@
+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>>;
+//# sourceMappingURL=CalendarPresets.d.ts.map

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

@@ -0,0 +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,aAIvC;AAED,eAAO,MAAM,eAAe,8JAA2F,CAAC"}

package/components/datePickers/DatePicker.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { cx, DatePickerCoreProps, IDropdownToggler, DropdownBodyProps } from "@epam/uui-core";
+import { BaseDatePicker } from "@epam/uui-components";
+import { SizeMod, IHasEditMode } from "../types";
+export interface DatePickerProps extends DatePickerCoreProps, SizeMod, IHasEditMode {
+}
+export declare class DatePicker extends BaseDatePicker<DatePickerProps> {
+    renderInput: (props: IDropdownToggler & {
+        cx: any;
+    }) => JSX.Element;
+    renderBody(props: DropdownBodyProps): JSX.Element;
+}
+//# sourceMappingURL=DatePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../components/datePickers/DatePicker.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,mBAAmB,EAAE,gBAAgB,EAAU,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtG,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAY,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAQ3D,MAAM,WAAW,eAAgB,SAAQ,mBAAmB,EAAE,OAAO,EAAE,YAAY;CAAG;AAEtF,qBAAa,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IAC3D,WAAW,UAAW,gBAAgB,GAAG;QAAC,IAAI,GAAG,CAAA;KAAC,iBAwBjD;IAED,UAAU,CAAC,KAAK,EAAE,iBAAiB;CAgBtC"}

package/components/datePickers/DatePickerBody.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerBody.d.ts","sourceRoot":"","sources":["../../../components/datePickers/DatePickerBody.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuC,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAIhG,wBAAgB,uBAAuB,aAKtC;AAED,eAAO,MAAM,cAAc,6JAI1B,CAAC"}

package/components/datePickers/RangeDatePicker.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IDropdownToggler, BaseRangeDatePickerProps, DropdownBodyProps } from "@epam/uui-core";
+import { BaseRangeDatePicker } from '@epam/uui-components';
+import { SizeMod } from '../index';
+export interface RangeDatePickerProps extends BaseRangeDatePickerProps, SizeMod {
+    getPlaceholder?(type: InputType): string;
+}
+export type InputType = 'from' | 'to';
+export declare class RangeDatePicker extends BaseRangeDatePicker<RangeDatePickerProps> {
+    renderBody(props: DropdownBodyProps): JSX.Element;
+    renderInput: (props: IDropdownToggler) => JSX.Element;
+}
+//# sourceMappingURL=RangeDatePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeDatePicker.d.ts","sourceRoot":"","sources":["../../../components/datePickers/RangeDatePicker.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAU,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACvG,OAAO,EAAwB,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACjF,OAAO,EAA8B,OAAO,EAAuB,MAAM,UAAU,CAAC;AAMpF,MAAM,WAAW,oBAAqB,SAAQ,wBAAwB,EAAE,OAAO;IAC3E,cAAc,CAAC,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;CAC5C;AAED,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,IAAI,CAAC;AAGtC,qBAAa,eAAgB,SAAQ,mBAAmB,CAAC,oBAAoB,CAAC;IAC1E,UAAU,CAAC,KAAK,EAAE,iBAAiB;IAsBnC,WAAW,UAAW,gBAAgB,iBAgDrC;CACJ"}

package/components/datePickers/RangeDatePickerBody.d.ts

@@ -0,0 +1,4 @@
+import { RangeDatePickerValue, RangeDatePickerBodyProps } from '@epam/uui-components';
+export declare function applyRangeDatePickerBodyMods(): string[];
+export declare const RangeDatePickerBody: (props: RangeDatePickerBodyProps<RangeDatePickerValue> & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+//# sourceMappingURL=RangeDatePickerBody.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RangeDatePickerBody.d.ts","sourceRoot":"","sources":["../../../components/datePickers/RangeDatePickerBody.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiD,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAIrI,wBAAgB,4BAA4B,aAO3C;AAED,eAAO,MAAM,mBAAmB,wLAI/B,CAAC"}

package/components/datePickers/index.d.ts

@@ -0,0 +1,6 @@
+export * from './DatePicker';
+export * from './DatePickerBody';
+export * from './Calendar';
+export * from './RangeDatePicker';
+export * from './RangeDatePickerBody';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/datePickers/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC"}

package/components/dnd/DropMarker.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { DndActorRenderParams, IHasCX } from '@epam/uui-core';
+export interface DropMarkerProps extends DndActorRenderParams, IHasCX {
+    enableBlocker?: boolean;
+}
+export declare class DropMarker extends React.Component<DropMarkerProps> {
+    render(): JSX.Element;
+}
+//# sourceMappingURL=DropMarker.d.ts.map

package/components/dnd/DropMarker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropMarker.d.ts","sourceRoot":"","sources":["../../../components/dnd/DropMarker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAG9D,MAAM,WAAW,eAAgB,SAAQ,oBAAoB,EAAE,MAAM;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IAC5D,MAAM;CAcT"}

package/components/dnd/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DropMarker';
+//# sourceMappingURL=index.d.ts.map

package/components/dnd/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/dnd/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/components/index.d.ts

@@ -1,4 +1,6 @@
 export * from './buttons';
+export * from './datePickers';
+export * from './dnd';
 export * from './inputs';
 export * from './layout';
 export * from './overlays';

package/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/components/inputs/Checkbox.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { CheckboxProps } from '@epam/uui-components';
-import '../../assets/styles/variables/inputs/checkbox.scss';
+import { CheckboxProps as UuiCheckboxProps } from '@epam/uui-components';
 export interface CheckboxMods {
     size?: '12' | '18';
-    theme?: 'light' | 'dark';
+    mode?: 'form' | 'cell';
 }
-export declare function applyCheckboxMods(mods: CheckboxMods & CheckboxProps): string[];
-export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & CheckboxMods & import("react").RefAttributes<any>>;
+export type CheckboxProps = CheckboxMods & UuiCheckboxProps;
+export declare function applyCheckboxMods(mods: CheckboxProps): string[];
+export declare const Checkbox: (props: UuiCheckboxProps & CheckboxMods & import("react").RefAttributes<any>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 //# sourceMappingURL=Checkbox.d.ts.map

package/components/inputs/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../components/inputs/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAA2B,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAM9E,OAAO,oDAAoD,CAAC;AAE5D,MAAM,WAAW,YAAY;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,YAAY,GAAG,aAAa,YAMnE;AAED,eAAO,MAAM,QAAQ,8GAGlB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../components/inputs/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAOlG,MAAM,WAAW,YAAY;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,MAAM,aAAa,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAE5D,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,aAAa,YAMpD;AAOD,eAAO,MAAM,QAAQ,yKAAkG,CAAC"}