@scaleflex/ui - npm Package Compare versions

Comparing version 2.11.7 to 2.11.8

core/autocomplete/autocomplete.component.js

@@ -5,6 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["MenuProps", "LabelProps", "InputProps", "error", "label", "hint", "noOptionsText", "focusOnOpen", "getOptionDisabled", "getOptionValue", "getOptionLabel", "multiple", "size", "disabled", "scroll", "disableTextEllipse", "readOnly", "placeholder", "fullWidth", "maxMenuHeight", "showClearIcon", "renderLabelIconEnd", "renderOptionLabel", "renderSearchEmptyMenuItem", "renderGroup", "groupBy", "hideArrow", "renderTag", "renderMenuItem", "onChange", "selectAllButtonLabel", "clearAllButtonLabel", "onClearAll", "onSelectAll"];
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["MenuProps", "LabelProps", "InputProps", "error", "label", "hint", "noOptionsText", "focusOnOpen", "getOptionDisabled", "getOptionValue", "getOptionLabel", "multiple", "size", "disabled", "disableTextEllipse", "readOnly", "placeholder", "fullWidth", "maxMenuHeight", "showClearIcon", "renderLabelIconEnd", "renderOptionLabel", "renderSearchEmptyMenuItem", "renderGroup", "groupBy", "hideArrow", "renderTag", "renderMenuItem", "onChange", "selectAllButtonLabel", "clearAllButtonLabel", "onClearAll", "onSelectAll"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Tick from '@scaleflex/icons/tick';
@@ -23,2 +24,6 @@ import { intrinsicComponent } from '../../utils/functions';
 var Autocomplete = intrinsicComponent(function (props, ref) {
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuJustOpened = _useState2[0],
+    setMenuJustOpened = _useState2[1];
   var MenuProps = props.MenuProps,
@@ -47,4 +52,2 @@ LabelPropsData = props.LabelProps,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
-    _props$scroll = props.scroll,
-    scroll = _props$scroll === void 0 ? true : _props$scroll,
     _props$disableTextEll = props.disableTextEllipse,
@@ -81,3 +84,4 @@ disableTextEllipse = _props$disableTextEll === void 0 ? false : _props$disableTextEll,
       getOptionLabel: getOptionLabel,
-      getOptionDisabled: getOptionDisabled
+      getOptionDisabled: getOptionDisabled,
+      setMenuJustOpened: setMenuJustOpened
     })),
@@ -121,2 +125,5 @@ formattedValue = _useAutocomplete.formattedValue,
   };
+  useEffect(function () {
+    setMenuJustOpened(open);
+  }, [open]);
   var renderMenuItem = function renderMenuItem(option, index) {
@@ -131,2 +138,3 @@ var optionId = getOptionValue(option);
     });
+    var isFocused = !menuJustOpened && index === focusedMenuItemIndex;
     var menuItemProps = {
@@ -141,3 +149,3 @@ key: optionId,
       active: isActive,
-      isFocused: index === focusedMenuItemIndex,
+      isFocused: isFocused,
       onClick: function onClick() {
@@ -150,3 +158,3 @@ return handleMenuItemClick(option);
       }, label), isActive && !renderOptionLabel && /*#__PURE__*/React.createElement(MenuItemActions, null, /*#__PURE__*/React.createElement(Styled.TickIcon, null, /*#__PURE__*/React.createElement(Tick, {
-        size: 12
+        size: size === 'md' ? 16 : 14
       }))))
@@ -215,3 +223,3 @@ };
     return /*#__PURE__*/React.createElement(MenuItem, {
-      noOptionsText: true,
+      disabled: Boolean(noOptionsText),
       size: size
@@ -238,3 +246,3 @@ }, noOptionsText);
       onClick: handleSelectAll
-    }, selectAllButtonLabel), /*#__PURE__*/React.createElement(Button, {
+    }, selectAllButtonLabel), !!(formattedValue !== null && formattedValue !== void 0 && formattedValue.length) && /*#__PURE__*/React.createElement(Button, {
       color: "link-secondary",
@@ -281,3 +289,2 @@ size: "sm",
     open: open,
-    scroll: scroll,
     anchorEl: anchorEl,
@@ -284,0 +291,0 @@ maxMenuHeight: maxMenuHeight

core/autocomplete/autocomplete.hook.d.ts

@@ -0,1 +1,2 @@
+import React from 'react';
 import type { AutocompleteProps, AutocompleteOptionType, AutocompleteOptionIdType, AutocompleteOptionLabelType, AutocompleteHookReturn } from './autocomplete.props';
@@ -6,2 +7,3 @@ export declare function useAutocomplete(props: Partial<AutocompleteProps> & {
     getOptionDisabled: (option: AutocompleteOptionType) => boolean;
+    setMenuJustOpened: React.Dispatch<React.SetStateAction<boolean>>;
 }): AutocompleteHookReturn;

core/autocomplete/autocomplete.hook.js

@@ -22,3 +22,4 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
     _props$closeMenuAfter = props.closeMenuAfterSelection,
-    closeMenuAfterSelection = _props$closeMenuAfter === void 0 ? true : _props$closeMenuAfter;
+    closeMenuAfterSelection = _props$closeMenuAfter === void 0 ? true : _props$closeMenuAfter,
+    setMenuJustOpened = props.setMenuJustOpened;
   var _useState = useState(undefined),
@@ -167,5 +168,7 @@ _useState2 = _slicedToArray(_useState, 2),
         setFocusedMenuItemIndex(nextIndex >= filteredOptions.length ? 0 : nextIndex);
+        setMenuJustOpened(false);
       } else if (event.key === 'ArrowUp') {
         var prevIndex = focusedMenuItemIndex - 1;
         setFocusedMenuItemIndex(prevIndex < 0 ? filteredOptions.length - 1 : prevIndex);
+        setMenuJustOpened(false);
       } else if (event.key === 'Enter' && focusedMenuItemIndex >= 0) {
@@ -245,4 +248,5 @@ var option = filteredOptions[focusedMenuItemIndex];
     handleSelectAllOptions: handleSelectAllOptions,
-    focusedMenuItemIndex: focusedMenuItemIndex
+    focusedMenuItemIndex: focusedMenuItemIndex,
+    setMenuJustOpened: setMenuJustOpened
   };
 }

core/autocomplete/autocomplete.props.d.ts

@@ -6,5 +6,4 @@ import { SyntheticEvent } from 'react';
 import type { InputProps } from '../input';
-import { InputBackgroundColor, InputSize } from '../../utils/types';
+import { InputSize } from '../../utils/types';
 import { AnchorElType } from '../menu/menu.props';
-export type AutocompleteBackgroundType = Values<typeof InputBackgroundColor>;
 export type AutocompleteSizeType = Values<typeof InputSize>;
@@ -31,3 +30,2 @@ export type AutocompleteOptionIdType = string;
 export interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    children?: React.ReactNode;
     size?: AutocompleteSizeType;
@@ -44,3 +42,2 @@ label?: React.ReactNode | ((props: LabelAndHintType) => React.ReactNode);
     disabled?: boolean;
-    scroll?: boolean;
     disableTextEllipse?: boolean;
@@ -65,3 +62,2 @@ error?: boolean;
     InputProps?: InputProps;
-    background?: AutocompleteBackgroundType;
     maxMenuHeight?: string | number;
@@ -140,2 +136,3 @@ showClearIcon?: boolean;
     focusedMenuItemIndex: number;
+    setMenuJustOpened: React.Dispatch<React.SetStateAction<boolean>>;
 }

core/autocomplete/autocomplete.styles.d.ts

@@ -24,6 +24,10 @@ import { AutocompleteProps } from './autocomplete.props';
         maxMenuHeight: string | number;
+    } & {
+        theme: import("styled-components").DefaultTheme;
     }>> & string & Omit<import("react").ForwardRefExoticComponent<import("../menu").MenuProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-    OptionGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    OptionGroup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>, never>, never>> & string;
+    }>, never>, {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
     Arrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../arrow-tick").ArrowTickProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
@@ -30,0 +34,0 @@ ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;

core/autocomplete/autocomplete.styles.js

@@ -45,4 +45,5 @@ import styled, { css } from 'styled-components';
 })(function (_ref3) {
-  var maxMenuHeight = _ref3.maxMenuHeight;
-  return css(["max-height:", ";background:#ffffff;"], +maxMenuHeight ? "".concat(+maxMenuHeight, "px") : maxMenuHeight);
+  var maxMenuHeight = _ref3.maxMenuHeight,
+    theme = _ref3.theme;
+  return css(["max-height:", ";background:", ";"], +maxMenuHeight ? "".concat(+maxMenuHeight, "px") : maxMenuHeight, theme.palette[PColor.BackgroundStateless]);
 });
@@ -53,5 +54,5 @@ var OptionGroup = /*#__PURE__*/styled.div.attrs({
   componentId: "sc-uyc6rp-6"
-})(["&:not(:last-child){padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid ", ";}"], function (_ref4) {
-  var palette = _ref4.theme.palette;
-  return palette[PColor.BordersSecondary];
+})(function (_ref4) {
+  var theme = _ref4.theme;
+  return css(["&:not(:last-child){padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid ", ";}"], theme.palette[PColor.BordersSecondary]);
 });
@@ -58,0 +59,0 @@ var Arrow = /*#__PURE__*/styled(arrowTick).withConfig({

core/autocomplete/autocomplete.utils.js

@@ -27,4 +27,3 @@ import _extends from "@babel/runtime/helpers/extends";
     return /*#__PURE__*/React.createElement(Label, _extends({
-      size: size,
-      error: error
+      size: size
     }, LabelProps || {}), label);
@@ -31,0 +30,0 @@ }

core/button/button.component.js

@@ -85,3 +85,5 @@ import _extends from "@babel/runtime/helpers/extends";
     size: getIconSize(size)
-  })), /*#__PURE__*/React.createElement(Styled.Label, null, children), endIcon && /*#__PURE__*/React.createElement(Styled.EndIcon, null, typeof endIcon === 'function' ? endIcon({
+  })), /*#__PURE__*/React.createElement(Styled.Label, null, children), endIcon && /*#__PURE__*/React.createElement(Styled.EndIcon, {
+    size: size
+  }, typeof endIcon === 'function' ? endIcon({
     size: getIconSize(size)
@@ -88,0 +90,0 @@ }) : endIcon)), sideBarType === SideBarType.Right && getSideBarSection(), badge && /*#__PURE__*/React.createElement(Styled.Badge, null, /*#__PURE__*/React.createElement(Badge, {

core/button/button.mixin.d.ts

@@ -49,2 +49,8 @@ import type { With } from '../../utils/types';
 };
+export declare const marginEndIconMixin: {
+    xs: import("styled-components").RuleSet<object>;
+    sm: import("styled-components").RuleSet<object>;
+    md: import("styled-components").RuleSet<object>;
+    lg: import("styled-components").RuleSet<object>;
+};
 export declare const sizeButtonLabelMixin: {
@@ -51,0 +57,0 @@ xs: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;

core/button/button.mixin.js

@@ -65,3 +65,4 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 export var sizeSidebarDividerMixin = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, css(["height:14px;"])), ButtonSize.Sm, css(["height:16px;"])), ButtonSize.Md, css(["height:18px;"])), ButtonSize.Lg, css(["height:20px;"]));
-export var paddingIconLabelMixin = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, css(["margin-right:5px;"])), ButtonSize.Sm, css(["margin-right:6px;"])), ButtonSize.Md, css(["margin-right:7px;"])), ButtonSize.Lg, css(["margin-right:8px;"]));
+export var paddingIconLabelMixin = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, css(["margin-right:3px;"])), ButtonSize.Sm, css(["margin-right:4px;"])), ButtonSize.Md, css(["margin-right:7px;"])), ButtonSize.Lg, css(["margin-right:8px;"]));
+export var marginEndIconMixin = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, css(["margin-left:3px;"])), ButtonSize.Sm, css(["margin-left:4px;"])), ButtonSize.Md, css(["margin-left:7px;"])), ButtonSize.Lg, css(["margin-left:8px;"]));
 export var sizeButtonLabelMixin = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, function (_ref14) {
@@ -68,0 +69,0 @@ var font = _ref14.theme.typography.font;

core/button/button.styles.d.ts

@@ -34,5 +34,7 @@ import type { ButtonProps, ButtonSizeType, ButtonType, SideBarType } from './button.props';
     }>> & string;
-    EndIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    EndIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, never>> & string;
+    }>, never>, {
+        size?: ButtonSizeType;
+    }>> & string;
     Badge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
@@ -39,0 +41,0 @@ ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;

core/button/button.styles.js

 import styled, { css } from 'styled-components';
 import { generateClassNames, applyDisplayNames } from '../../utils/functions';
 import { BorderRadiusSize as BRSize } from '../../utils/types/shape';
-import { colorButtonMixin, sizeButtonMixin, sizeButtonLabelMixin, sizeSidebarMixin, sizeSidebarDividerMixin, paddingIconLabelMixin, sizeSecondaryButtonMixin } from './button.mixin';
+import { colorButtonMixin, sizeButtonMixin, sizeButtonLabelMixin, sizeSidebarMixin, sizeSidebarDividerMixin, paddingIconLabelMixin, sizeSecondaryButtonMixin, marginEndIconMixin } from './button.mixin';
 import { Color as PaletteColor } from '../../utils/types/palette';
@@ -70,3 +70,7 @@ import { ButtonSize, ButtonColor } from '../../utils/types';
   componentId: "sc-lxwit0-7"
-})(["display:flex;margin-left:6px;"]);
+})(function (_ref5) {
+  var _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? ButtonSize.Md : _ref5$size;
+  return css(["display:flex;", ""], marginEndIconMixin[size]);
+});
 var Styled = applyDisplayNames({
@@ -73,0 +77,0 @@ Button: Button,

core/calendar/calendar.component.js

@@ -5,3 +5,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["value", "onChange", "autoSelectToday", "enableAutoSelect", "maxDate", "minDate", "anchorEl", "zIndex", "position", "popperOptions", "open", "setOpen", "calendarStyles", "popperWrapperStyles"];
+var _excluded = ["value", "onChange", "autoSelectToday", "onCancel", "onDateClick", "enableAutoSelect", "maxDate", "minDate", "calendarStyles"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -15,3 +15,2 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { intrinsicComponent } from '../../utils/functions';
-import Popper from '../popper';
 import MonthPicker from './month-picker/month-picker.component';
@@ -22,3 +21,2 @@ import YearPicker from './year-picker/year-picker.component';
 import Styled from './calendar.styles';
-import { Position } from '../popper/types';
 var Calendar = intrinsicComponent(function (_ref, ref) {
@@ -29,2 +27,4 @@ var _isYearFormRegex$test;
     autoSelectToday = _ref.autoSelectToday,
+    onCancel = _ref.onCancel,
+    onDateClick = _ref.onDateClick,
     _ref$enableAutoSelect = _ref.enableAutoSelect,
@@ -36,13 +36,3 @@ enableAutoSelect = _ref$enableAutoSelect === void 0 ? false : _ref$enableAutoSelect,
     minDate = _ref$minDate === void 0 ? '' : _ref$minDate,
-    anchorEl = _ref.anchorEl,
-    _ref$zIndex = _ref.zIndex,
-    zIndex = _ref$zIndex === void 0 ? 1300 : _ref$zIndex,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? Position.BottomStart : _ref$position,
-    popperOptions = _ref.popperOptions,
-    _ref$open = _ref.open,
-    open = _ref$open === void 0 ? false : _ref$open,
-    setOpen = _ref.setOpen,
     calendarStyles = _ref.calendarStyles,
-    popperWrapperStyles = _ref.popperWrapperStyles,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -165,6 +155,3 @@ var _getMaxDate = getMaxDate(maxDate),
   };
-  var handleOpen = function handleOpen(isOpen) {
-    if (setOpen) setOpen(isOpen);
-  };
-  var onDateClick = function onDateClick(day) {
+  var handleDateClick = function handleDateClick(day) {
     var newDay = day.timestamp;
@@ -174,3 +161,3 @@ if (onChange) {
     }
-    if (handleOpen) handleOpen(false);
+    if (onDateClick) onDateClick(newDay);
     setSelectedDay(newDay);
@@ -208,3 +195,3 @@ };
     }
-  }, [value, open]);
+  }, [value]);
   useEffect(function () {
@@ -223,3 +210,3 @@ setTimeout(function () {
         onClick: function onClick() {
-          return onDateClick(day);
+          return handleDateClick(day);
         },
@@ -239,16 +226,3 @@ day: day,
   };
-  return /*#__PURE__*/React.createElement(Popper, {
-    onClick: function onClick() {
-      return handleOpen(!open);
-    },
-    anchorEl: anchorEl,
-    open: open,
-    popperOptions: popperOptions,
-    wrapperStyles: popperWrapperStyles,
-    zIndex: zIndex,
-    position: position || 'bottom-start',
-    overlay: true
-  }, /*#__PURE__*/React.createElement(Styled.Calendar, _extends({
-    position: position,
-    open: open,
+  return /*#__PURE__*/React.createElement(Styled.Calendar, _extends({
     style: _objectSpread({}, calendarStyles)
@@ -337,5 +311,3 @@ }, rest, {
   }))), /*#__PURE__*/React.createElement(Styled.CalendarBody, null, renderCalendar()), /*#__PURE__*/React.createElement(Styled.ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: function onClick() {
-      return handleOpen(false);
-    },
+    onClick: onCancel,
     size: "xs",
@@ -348,4 +320,4 @@ color: "basic"
     disabled: isTodayDateDisabled
-  }, "Today"))));
+  }, "Today")));
 });
 export default Calendar;

core/calendar/calendar.props.d.ts

 import type { Values } from '../../utils/types';
-import { PopperOptions, VirtualElement } from '../popper/popper.props';
+import { VirtualElement } from '../popper/popper.props';
 import { Position } from '../popper/types';
@@ -9,15 +9,9 @@ export type AnchorElType = Element | VirtualElement | null | undefined;
     maxDate?: string;
-    position?: PopperPositionType;
-    popperOptions?: PopperOptions;
     minDate?: string;
-    anchorEl?: AnchorElType;
-    open?: boolean;
     autoSelectToday?: boolean;
     enableAutoSelect?: boolean;
-    isDisabled?: boolean;
-    zIndex?: number;
     calendarStyles?: object;
-    popperWrapperStyles?: object;
     onChange?: (value: string) => void;
-    setOpen?: (value: boolean) => void;
+    onCancel?: () => void;
+    onDateClick?: (value: number) => void;
 }
@@ -24,0 +18,0 @@ export interface MonthPickerProps {

core/calendar/calendar.styles.d.ts

@@ -10,3 +10,5 @@ import { CalendarProps } from './calendar.props';
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>, never>, keyof CalendarProps> & CalendarProps>, never>, CalendarProps>> & string;
+    }>, never>, keyof CalendarProps> & CalendarProps>, never>, {
+        open: boolean;
+    }>> & string;
     MonthButtonsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -66,5 +68,5 @@ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }>, never>, CalendarProps>> & string;
-    ButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, CalendarProps>> & string;
+    }>, never>, never>> & string;
     HeaderBodyYear: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -78,19 +80,43 @@ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, CalendarProps>> & string;
+    }>, never>, {
+        isDisabled: boolean;
+    } & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
     MonthsHeaderLeftArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, CalendarProps>> & string;
+    }>, never>, {
+        isDisabled: boolean;
+    } & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
     HeaderRightArrows: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, CalendarProps>> & string;
+    }>, never>, {
+        isDisabled: boolean;
+    } & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
     HeaderRightArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, CalendarProps>> & string;
+    }>, never>, {
+        isDisabled: boolean;
+    } & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
     MonthsHeaderRightArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, CalendarProps>> & string;
+    }>, never>, {
+        isDisabled: boolean;
+    } & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
     HeaderLeftArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, CalendarProps>> & string;
+    }>, never>, {
+        isDisabled: boolean;
+    } & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string;
 };
 export default Styled;

core/calendar/calendar.styles.js

@@ -17,3 +17,3 @@ import styled, { css, keyframes } from 'styled-components';
   var palette = _ref.theme.palette;
-  return css(["position:absolute;width:224px;top:4px;background:", ";box-shadow:0px 2px 6px ", ";border-radius:2px;overflow:hidden;padding:14px 12px 12px 12px;z-index:1111;user-select:none;"], palette[PColor.BackgroundStateless], palette[PColor.LargeShadow]);
+  return css(["position:relative;width:224px;top:4px;background:", ";box-shadow:0px 2px 6px ", ";border-radius:2px;overflow:hidden;padding:14px 12px 12px 12px;z-index:1111;user-select:none;"], palette[PColor.BackgroundStateless], palette[PColor.LargeShadow]);
 });
@@ -62,3 +62,3 @@ var DatePickerCalendar = /*#__PURE__*/styled.div.attrs({
     open = _ref4$open === void 0 ? false : _ref4$open;
-  return css(["top:0;left:0;box-shadow:unset;transform:", ";transition:transform 0.4s ease-in-out;"], open ? 'translateY(0)' : 'translateY(-100%)');
+  return css(["position:absolute;top:0;left:0;box-shadow:unset;transform:", ";transition:transform 0.4s ease-in-out;"], open ? 'translateY(0)' : 'translateY(-100%)');
 });
@@ -178,3 +178,4 @@ var MonthButtonsWrapper = /*#__PURE__*/styled.div.attrs({
   var palette = _ref11.theme.palette,
-    isDisabled = _ref11.isDisabled;
+    _ref11$isDisabled = _ref11.isDisabled,
+    isDisabled = _ref11$isDisabled === void 0 ? false : _ref11$isDisabled;
   return css(["position:absolute;left:16.37px;top:0;color:", ";cursor:", ";pointer-events:", ";"], isDisabled ? palette[PColor.TextPlaceholder] : palette[PColor.IconsPrimary], isDisabled ? 'auto' : 'pointer', isDisabled ? 'none' : '');
@@ -188,3 +189,4 @@ });
   var palette = _ref12.theme.palette,
-    isDisabled = _ref12.isDisabled;
+    _ref12$isDisabled = _ref12.isDisabled,
+    isDisabled = _ref12$isDisabled === void 0 ? false : _ref12$isDisabled;
   return css(["position:absolute;color:", ";left:0;top:0;color:", ";cursor:", ";pointer-events:", ";"], palette[PColor.IconsPrimary], isDisabled ? palette[PColor.TextPlaceholder] : palette[PColor.IconsPrimary], isDisabled ? 'auto' : 'pointer', isDisabled ? 'none' : '');
@@ -198,3 +200,4 @@ });
   var palette = _ref13.theme.palette,
-    isDisabled = _ref13.isDisabled;
+    _ref13$isDisabled = _ref13.isDisabled,
+    isDisabled = _ref13$isDisabled === void 0 ? false : _ref13$isDisabled;
   return css(["position:absolute;right:16.37px;top:0;color:", ";cursor:", ";pointer-events:", ";"], isDisabled ? palette[PColor.TextPlaceholder] : palette[PColor.IconsPrimary], isDisabled ? 'auto' : 'pointer', isDisabled ? 'none' : '');
@@ -208,3 +211,4 @@ });
   var palette = _ref14.theme.palette,
-    isDisabled = _ref14.isDisabled;
+    _ref14$isDisabled = _ref14.isDisabled,
+    isDisabled = _ref14$isDisabled === void 0 ? false : _ref14$isDisabled;
   return css(["position:absolute;right:0;color:", ";cursor:", ";pointer-events:", ";"], isDisabled ? palette[PColor.TextPlaceholder] : palette[PColor.IconsPrimary], isDisabled ? 'auto' : 'pointer', isDisabled ? 'none' : '');
@@ -226,5 +230,3 @@ });
   componentId: "sc-10lx57a-23"
-})(function () {
-  return css(["display:flex;justify-content:flex-end;align-items:center;column-gap:4px;width:100%;height:24px;padding-top:12px;.SfxButton-root{max-height:24px;}"]);
-});
+})(["display:flex;justify-content:flex-end;align-items:center;column-gap:4px;width:100%;height:24px;padding-top:12px;.SfxButton-root{max-height:24px;}"]);
 var Styled = applyDisplayNames({
@@ -231,0 +233,0 @@ Calendar: Calendar,

core/check-box-group/check-box-group.component.js

@@ -20,4 +20,6 @@ import _extends from "@babel/runtime/helpers/extends";
     checkBoxGroupProps = _ref.checkBoxGroupProps,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$labelPosition = _ref.labelPosition,
@@ -24,0 +26,0 @@ labelPosition = _ref$labelPosition === void 0 ? LabelPosition.After : _ref$labelPosition,

core/check-box/check-box.component.js

@@ -22,4 +22,6 @@ import _extends from "@babel/runtime/helpers/extends";
     checkBoxProps = _ref.checkBoxProps,
-    readOnly = _ref.readOnly,
-    disabled = _ref.disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -26,0 +28,0 @@ var getIcon = function getIcon(props) {

core/color-picker/color-picker.component.js

@@ -6,3 +6,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["defaultColor", "onChange", "pinnedColors", "showTransparentColor", "hidePinIcon", "containerProps"];
+var _excluded = ["defaultColor", "onChange", "pinnedColors", "showTransparentColor", "hidePinIcon", "containerProps", "MenuProps"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -33,2 +33,3 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
     containerProps = _ref.containerProps,
+    MenuProps = _ref.MenuProps,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -290,6 +291,8 @@ var showedColors = showTransparentColor ? transparentColor.concat(pinnedColors) : pinnedColors;
     size: "sm",
-    value: inputType,
-    MenuProps: _objectSpread({
+    value: inputType
+    // TODO: Remove containerProps in major release
+    ,
+    MenuProps: _objectSpread(_objectSpread({
       zIndex: 11112
-    }, containerProps),
+    }, containerProps), MenuProps),
     onChange: function onChange(ev) {
@@ -296,0 +299,0 @@ return setInputType(ev);

core/color-picker/color-picker.props.d.ts

@@ -35,3 +35,4 @@ import type { SelectSimpleValueType } from '../select/select.props';
     hidePinIcon?: boolean;
-    containerProps?: MenuProps;
+    containerProps?: Omit<MenuProps, 'open'>;
+    MenuProps?: Omit<MenuProps, 'open'>;
 }

core/date-picker/date-picker.component.js

@@ -16,2 +16,4 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import Styled from './date-picker.styles';
+import Popper from '../popper';
+import { Position } from '../popper/types';
 var Datepicker = intrinsicComponent(function (_ref, ref) {
@@ -29,3 +31,4 @@ var _isYearFormRegex$test;
     minDate = _ref$minDate === void 0 ? '' : _ref$minDate,
-    position = _ref.position,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? Position.BottomStart : _ref$position,
     label = _ref.label,
@@ -89,2 +92,5 @@ _ref$size = _ref.size,
   };
+  var handleOpen = function handleOpen(isOpen) {
+    if (setOpen) setOpen(isOpen);
+  };
   useEffect(function () {
@@ -139,19 +145,29 @@ if (autoSelectToday) return;
     size: size
-  }, placeholder), /*#__PURE__*/React.createElement(Calendar, {
+  }, placeholder), /*#__PURE__*/React.createElement(Popper, {
+    onClick: function onClick() {
+      return handleOpen(!open);
+    },
+    anchorEl: datePickerRef.current,
+    open: open,
+    popperOptions: popperOptions,
+    wrapperStyles: popperWrapperStyles,
+    zIndex: zIndex,
+    position: position,
+    overlay: true
+  }, /*#__PURE__*/React.createElement(Calendar, {
     value: inputValue,
-    open: open,
-    setOpen: setOpen,
     onChange: handleOnChange,
+    onDateClick: function onDateClick() {
+      return handleOpen(false);
+    },
+    onCancel: function onCancel() {
+      return handleOpen(false);
+    },
     maxDate: maxDate,
     minDate: minDate,
-    zIndex: zIndex,
     autoSelectToday: autoSelectToday,
     enableAutoSelect: enableAutoSelect,
-    anchorEl: datePickerRef.current,
-    position: position || 'bottom-start',
-    popperOptions: popperOptions,
-    calendarStyles: calendarStyles,
-    popperWrapperStyles: popperWrapperStyles
-  }));
+    calendarStyles: calendarStyles
+  })));
 });
 export default Datepicker;

core/date-picker/date-picker.styles.d.ts

@@ -20,8 +20,10 @@ import { InputProps } from '../input';
     }>> & string;
-    DatePickerIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    DatePickerIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<Omit<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
     }, Omit<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-    }>, never>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+    }>, never>, InputProps & {
+        theme: import("styled-components").DefaultTheme;
+    }>> & string & Omit<import("react").ForwardRefExoticComponent<import("../icon-button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 };
 export default Styled;

core/date-picker/date-picker.styles.js

@@ -23,3 +23,3 @@ import styled, { css } from 'styled-components';
     size = _ref.size;
-  return css(["position:absolute;top:", ";left:", ";width:", ";height:24px;", " color:", ";background:", ";pointer-events:", ";"], size === 'sm' ? '24px' : '32px', size === 'sm' ? '13px' : '18px', fullWidth ? '95%' : '244px', theme.typography.font[FontVariant.InputMd], theme.palette[PColor.TextPlaceholder], readOnly || disabled ? theme.palette[PColor.BackgroundHover] : theme.palette[PColor.BackgroundStateless], readOnly || disabled ? 'none' : 'all');
+  return css(["position:absolute;top:50%;transform:translateY(-50%);left:", ";width:", ";height:19px;", " color:", ";background:", ";pointer-events:", ";display:flex;align-items:center;"], size === 'sm' ? '13px' : '14px', fullWidth ? '95%' : '244px', theme.typography.font[FontVariant.InputMd], theme.palette[PColor.TextPlaceholder], readOnly || disabled ? theme.palette[PColor.BackgroundHover] : theme.palette[PColor.BackgroundStateless], readOnly || disabled ? 'none' : 'all');
 });
@@ -33,4 +33,5 @@ var DatePickerInput = /*#__PURE__*/styled(InputGroup).attrs({
     $isHovering = _ref2$$isHovering === void 0 ? false : _ref2$$isHovering,
-    theme = _ref2.theme;
-  return css(["input[type='date']::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;}.SfxInput-ClearIcon{display:none;}&:hover .SfxInput-ClearIcon,&:focus-within .SfxInput-ClearIcon{display:block;}", ""], $isHovering && css(["border:1px solid ", ";"], theme.palette[PColor.BordersPrimaryHover]));
+    theme = _ref2.theme,
+    size = _ref2.size;
+  return css(["input[type='date']::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;}padding:8px 12px;align-items:center;.SfxInput-ClearIcon{display:none;}&:hover .SfxInput-ClearIcon,&:focus-within .SfxInput-ClearIcon{display:block;}", " .SfxInput-Base,.SfxInput-inputContent{height:", ";}"], $isHovering && css(["border:1px solid ", ";"], theme.palette[PColor.BordersPrimaryHover]), size === 'sm' ? '16px' : '18px');
 });
@@ -41,3 +42,6 @@ var DatePickerIconButton = /*#__PURE__*/styled(IconButton).attrs({
   componentId: "sc-14tu7pc-3"
-})(["border:none;padding:0;z-index:1;"]);
+})(function (_ref3) {
+  var theme = _ref3.theme;
+  return css(["border:none;padding:0;z-index:1;svg{color:", ";}"], theme.palette[PColor.IconsSecondary]);
+});
 var Styled = applyDisplayNames({
@@ -44,0 +48,0 @@ DatePicker: DatePicker,

core/drawer/drawer.component.js

@@ -0,6 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "open", "iconsSize", "collapsed", "top", "hideBackdrop", "disablePortal", "collapseButtonLabel", "persistentDrawerStyles", "temproryDrawerStyles", "variant", "onClose", "onCollapse", "onCollapseClick"];
+var _excluded = ["children", "open", "iconsSize", "collapsed", "top", "hideBackdrop", "disablePortal", "collapseButtonLabel", "persistentDrawerStyles", "temproryDrawerStyles", "collapseButtonStyle", "variant", "onClose", "onCollapse", "onCollapseClick", "hideScroll"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -30,3 +30,4 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
     hideBackdrop = _ref$hideBackdrop === void 0 ? false : _ref$hideBackdrop,
-    disablePortal = _ref.disablePortal,
+    _ref$disablePortal = _ref.disablePortal,
+    disablePortal = _ref$disablePortal === void 0 ? false : _ref$disablePortal,
     _ref$collapseButtonLa = _ref.collapseButtonLabel,
@@ -38,2 +39,4 @@ collapseButtonLabel = _ref$collapseButtonLa === void 0 ? 'Collapse menu' : _ref$collapseButtonLa,
     temproryDrawerStyles = _ref$temproryDrawerSt === void 0 ? {} : _ref$temproryDrawerSt,
+    _ref$collapseButtonSt = _ref.collapseButtonStyle,
+    collapseButtonStyle = _ref$collapseButtonSt === void 0 ? {} : _ref$collapseButtonSt,
     _ref$variant = _ref.variant,
@@ -44,2 +47,4 @@ variant = _ref$variant === void 0 ? Variant.Auto : _ref$variant,
     onCollapseClick = _ref.onCollapseClick,
+    _ref$hideScroll = _ref.hideScroll,
+    hideScroll = _ref$hideScroll === void 0 ? false : _ref$hideScroll,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -65,2 +70,14 @@ var theme = useTheme();
   }, [isCollapsed]);
+  useEffect(function () {
+    if (hideScroll) {
+      if (open) {
+        document.body.classList.add('Drawer-open');
+      } else {
+        document.body.classList.remove('Drawer-open');
+      }
+      return function () {
+        document.body.classList.remove('Drawer-open');
+      };
+    }
+  }, [open]);
   var handleCollapse = function handleCollapse() {
@@ -103,3 +120,4 @@ var newCollapseState = !isCollapsed;
       onClick: handleCollapse,
-      isCollapsed: isCollapsed
+      isCollapsed: isCollapsed,
+      style: _objectSpread({}, collapseButtonStyle)
     }, /*#__PURE__*/React.createElement(DrawerItemIcon, null, isCollapsed ? function (props) {
@@ -106,0 +124,0 @@ return /*#__PURE__*/React.createElement(ArrowSidebarRightOutline, _extends({}, props, {

core/drawer/drawer.props.d.ts

@@ -18,2 +18,3 @@ import type { PropsWithChildren } from 'react';
     persistentDrawerStyles?: object;
+    collapseButtonStyle?: React.CSSProperties;
     temproryDrawerStyles?: object;
@@ -24,2 +25,3 @@ variant?: DrawerVariant;
     onCollapseClick?: (collapseState: boolean) => void;
+    hideScroll?: boolean;
 }
@@ -26,0 +28,0 @@ export interface DrawerItemProps extends PropsWithChildren, React.HTMLAttributes<HTMLLIElement> {

core/ellipsed-text/ellipsed-text.component.js

 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "element", "maxLinesCount", "customMaxHeight", "noTooltip", "tooltipProps", "textWrapperProps"];
+var _excluded = ["children", "element", "maxLinesCount", "customMaxHeight", "noTooltip", "forceTooltip", "tooltipProps", "tooltipTitle", "textSuffix", "textWrapperProps"];
 import React, { useState, useRef, useLayoutEffect, useCallback } from 'react';
@@ -9,2 +9,3 @@ import TooltipV2 from '../tooltip-v2';
 import Styled from './ellipsed-text.styles';
+import { getTextSuffix } from './ellipsed-text.utils';
 var POSSIBLE_FONT_GAP = 1; // there is a possibility that the font might render around ~1px in height/width for some chars so we are considering that 1px in-case.
@@ -21,3 +22,7 @@
     noTooltip = _ref$noTooltip === void 0 ? false : _ref$noTooltip,
+    _ref$forceTooltip = _ref.forceTooltip,
+    forceTooltip = _ref$forceTooltip === void 0 ? false : _ref$forceTooltip,
     tooltipProps = _ref.tooltipProps,
+    tooltipTitle = _ref.tooltipTitle,
+    textSuffix = _ref.textSuffix,
     _ref$textWrapperProps = _ref.textWrapperProps,
@@ -45,3 +50,3 @@ textWrapperProps = _ref$textWrapperProps === void 0 ? {} : _ref$textWrapperProps,
       onDoubleClick: ignoreEvent
-    }, children);
+    }, tooltipTitle || children);
   };
@@ -67,17 +72,20 @@ useLayoutEffect(function () {
   }, []);
-  return /*#__PURE__*/React.createElement(Styled.EllipsedTextWrapper, _extends({
-    $maxLinesCount: maxLinesCount,
-    ref: textContentRef
-  }, textWrapperProps, rest), shouldEllipse && !noTooltip ? /*#__PURE__*/React.createElement(TooltipV2, _extends({
-    position: "top",
-    size: "md",
-    ref: ref,
-    arrow: true
-  }, tooltipProps, {
-    title: renderTooltipTitle()
-  }), /*#__PURE__*/React.createElement(Styled.TooltipContent, {
-    as: element,
-    $customMaxHeight: customMaxHeight
-  }, children)) : children);
+  var renderEllipsedText = function renderEllipsedText() {
+    return /*#__PURE__*/React.createElement(Styled.EllipsedTextWrapper, _extends({
+      $maxLinesCount: maxLinesCount,
+      ref: textContentRef
+    }, textWrapperProps, rest), shouldEllipse && !noTooltip || forceTooltip ? /*#__PURE__*/React.createElement(TooltipV2, _extends({
+      position: "top",
+      size: "md",
+      ref: ref,
+      arrow: true
+    }, tooltipProps, {
+      title: renderTooltipTitle()
+    }), /*#__PURE__*/React.createElement(Styled.TooltipContent, {
+      as: element,
+      $customMaxHeight: customMaxHeight
+    }, children)) : children);
+  };
+  return textSuffix && shouldEllipse ? /*#__PURE__*/React.createElement(Styled.EllipsedTextContainer, null, renderEllipsedText(), /*#__PURE__*/React.createElement(Styled.SuffixTextWrapper, null, getTextSuffix(textSuffix))) : renderEllipsedText();
 });
 export default EllipsedText;

core/ellipsed-text/ellipsed-text.props.d.ts

@@ -9,4 +9,7 @@ import { HTMLAttributes } from 'react';
     noTooltip?: boolean;
+    forceTooltip?: boolean;
     tooltipProps?: TooltipV2Props;
     textWrapperProps?: HTMLAttributes<HTMLDivElement>;
+    tooltipTitle?: string;
+    textSuffix?: string;
 }

core/ellipsed-text/ellipsed-text.styles.d.ts

 declare const Styled: {
+    EllipsedTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, never>> & string;
     EllipsedTextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -16,3 +19,6 @@ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }>> & string;
+    SuffixTextWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, never>> & string;
 };
 export default Styled;

core/ellipsed-text/ellipsed-text.styles.js

 import styled, { css } from 'styled-components';
 import { generateClassNames, applyDisplayNames } from '../../utils/functions';
 var baseClassName = 'Ellipsed';
-var EllipsedTextWrapper = /*#__PURE__*/styled.div.attrs({
+var EllipsedTextContainer = /*#__PURE__*/styled.div.attrs({
   className: generateClassNames(baseClassName, 'root')
 }).withConfig({
   componentId: "sc-53xpj8-0"
+})(["display:flex;"]);
+var EllipsedTextWrapper = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'ellipsed-text-wrapper')
+}).withConfig({
+  componentId: "sc-53xpj8-1"
 })(function (_ref) {
@@ -15,3 +20,3 @@ var $maxLinesCount = _ref.$maxLinesCount;
 }).withConfig({
-  componentId: "sc-53xpj8-1"
+  componentId: "sc-53xpj8-2"
 })(function (_ref2) {
@@ -21,6 +26,13 @@ var $customMaxHeight = _ref2.$customMaxHeight;
 });
+var SuffixTextWrapper = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'suffix-text-wrapper')
+}).withConfig({
+  componentId: "sc-53xpj8-3"
+})(["word-break:normal;display:flex;justify-content:flex-end;flex-direction:column;"]);
 var Styled = applyDisplayNames({
+  EllipsedTextContainer: EllipsedTextContainer,
   EllipsedTextWrapper: EllipsedTextWrapper,
-  TooltipContent: TooltipContent
+  TooltipContent: TooltipContent,
+  SuffixTextWrapper: SuffixTextWrapper
 });
 export default Styled;

core/gallery-button/gallery-button.props.d.ts

@@ -1,5 +0,5 @@
-import { IconButtonProps } from '../icon-button';
-export interface GalleryButtonProps extends IconButtonProps {
+import { PropsWithChildren } from 'react';
+export interface GalleryButtonProps extends PropsWithChildren, Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'> {
     disabled?: boolean;
     active?: boolean;
 }

core/icon-button-table/icon-button-table.props.d.ts

@@ -11,2 +11,3 @@ import { IconProps } from '@scaleflex/icons/icon.props';
     children: React.ReactNode | ((props: IconProps) => React.ReactNode);
+    disabled?: boolean;
 }

core/icon-button/icon-button.component.js

@@ -18,3 +18,5 @@ import _extends from "@babel/runtime/helpers/extends";
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Styled.IconButton, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Styled.IconButton, _extends({
+    type: "button"
+  }, rest, {
     size: size,
@@ -21,0 +23,0 @@ color: color,

core/image-comparison-slider/image-comparison-slider.component.js

@@ -5,6 +5,6 @@ import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["leftImgProps", "rightImgProps", "imgWrapperProps", "handleProps", "fallbackPreviewProps", "footerProps"],
-  _excluded2 = ["color", "thumbIconSize", "thumbIconPadding", "thumbIcon"],
+  _excluded2 = ["color", "thumbColor", "thumbIconSize", "thumbIconPadding", "thumbIcon"],
   _excluded3 = ["leftText", "rightText", "hideFooter"];
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import ArrowChange from '@scaleflex/icons/arrow-change';
+import { Extends } from '@scaleflex/icons';
 import { getHorizontalPosition } from './image-comparison-slider.utils';
@@ -26,10 +26,12 @@ import ImagePreviewComponent from './image-preview.component';
     _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? lightPalette[Color.BackgroundStateless] : _ref2$color,
+    color = _ref2$color === void 0 ? lightPalette[Color.WHITE_0_7_8_Overlay] : _ref2$color,
+    _ref2$thumbColor = _ref2.thumbColor,
+    thumbColor = _ref2$thumbColor === void 0 ? lightPalette[Color.BackgroundStateless] : _ref2$thumbColor,
     _ref2$thumbIconSize = _ref2.thumbIconSize,
-    thumbIconSize = _ref2$thumbIconSize === void 0 ? 10 : _ref2$thumbIconSize,
+    thumbIconSize = _ref2$thumbIconSize === void 0 ? 16 : _ref2$thumbIconSize,
     _ref2$thumbIconPaddin = _ref2.thumbIconPadding,
-    thumbIconPadding = _ref2$thumbIconPaddin === void 0 ? 10 : _ref2$thumbIconPaddin,
+    thumbIconPadding = _ref2$thumbIconPaddin === void 0 ? 8 : _ref2$thumbIconPaddin,
     _ref2$thumbIcon = _ref2.thumbIcon,
-    thumbIcon = _ref2$thumbIcon === void 0 ? /*#__PURE__*/React.createElement(ArrowChange, {
-      color: lightPalette[Color.IconsPrimary]
+    thumbIcon = _ref2$thumbIcon === void 0 ? /*#__PURE__*/React.createElement(Extends, {
+      color: lightPalette[Color.IconsPrimaryHover]
     }) : _ref2$thumbIcon,
@@ -115,5 +117,6 @@ restHandleProps = _objectWithoutProperties(_ref2, _excluded2);
     color: color,
+    $thumbColor: thumbColor,
     $thumbIconPadding: thumbIconPadding,
     $thumbIconSize: thumbIconSize
-  }, restHandleProps), thumbIcon), /*#__PURE__*/React.createElement(Styled.LeftImageWrapper, _extends({
+  }, restHandleProps), thumbIcon), /*#__PURE__*/React.createElement(Styled.ImagesWrapper, null, /*#__PURE__*/React.createElement(Styled.LeftImageWrapper, _extends({
     ref: topImageRef
@@ -124,4 +127,4 @@ }, imgWrapperProps), /*#__PURE__*/React.createElement(ImagePreviewComponent, _extends({}, leftImgProps, {
     fallbackPreviewProps: fallbackPreviewProps
-  })))), !hideFooter && /*#__PURE__*/React.createElement(Styled.Footer, restFooterProps, /*#__PURE__*/React.createElement("span", null, leftText), /*#__PURE__*/React.createElement("span", null, rightText)));
+  }))))), !hideFooter && /*#__PURE__*/React.createElement(Styled.Footer, restFooterProps, /*#__PURE__*/React.createElement("span", null, leftText), /*#__PURE__*/React.createElement("span", null, rightText)));
 });
 export default ImageComparisonSlider;

core/image-comparison-slider/image-comparison-slider.props.d.ts

@@ -26,2 +26,3 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
         thumbIconSize?: number;
+        thumbColor?: string;
         thumbIcon?: React.ReactNode;
@@ -28,0 +29,0 @@ thumbIconPadding?: number;

core/image-comparison-slider/image-comparison-slider.styles.d.ts

@@ -26,5 +26,11 @@ declare const Styled: {
         color?: string;
+        $thumbColor?: string;
         $thumbIconPadding?: number;
         $thumbIconSize?: number;
+    } & {
+        theme: import("styled-components").DefaultTheme;
     }>> & string;
+    ImagesWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }>, never>, never>> & string;
     ComparisonSlider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -31,0 +37,0 @@ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;

core/image-comparison-slider/image-comparison-slider.styles.js

@@ -12,3 +12,3 @@ import styled, { css, keyframes } from 'styled-components';
   componentId: "sc-111irnx-0"
-})(["display:flex;flex-direction:column;gap:10px;user-select:none;"]);
+})(["display:flex;flex-direction:column;gap:10px;height:100%;user-select:none;"]);
 var Image = /*#__PURE__*/styled.img.attrs({
@@ -19,5 +19,6 @@ className: generateClassNames(baseClassName, 'image')
 })(function (_ref) {
-  var $isLoading = _ref.$isLoading,
+  var _ref$$isLoading = _ref.$isLoading,
+    $isLoading = _ref$$isLoading === void 0 ? false : _ref$$isLoading,
     theme = _ref.theme;
-  return css(["width:100%;height:auto;vertical-align:middle;-moz-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:none;touch-action:none;", ""], $isLoading && css(["background-color:", ";animation:", " 1.5s ease-in-out 0.5s infinite;width:100%;height:100%;"], theme === null || theme === void 0 ? void 0 : theme.palette[PaletteColor.ButtonPrimaryText], pulseKeyframe));
+  return css(["width:100%;height:auto;vertical-align:middle;-moz-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:none;touch-action:none;", ""], $isLoading && css(["background-color:", ";animation:", " 1.5s ease-in-out 0.5s infinite;width:100%;height:100%;"], theme === null || theme === void 0 ? void 0 : theme.palette[PaletteColor.BackgroundHover], pulseKeyframe));
 });
@@ -40,7 +41,9 @@ var LeftImageWrapper = /*#__PURE__*/styled.div.attrs({
   var color = _ref2.color,
+    $thumbColor = _ref2.$thumbColor,
     _ref2$$thumbIconPaddi = _ref2.$thumbIconPadding,
-    $thumbIconPadding = _ref2$$thumbIconPaddi === void 0 ? 10 : _ref2$$thumbIconPaddi,
+    $thumbIconPadding = _ref2$$thumbIconPaddi === void 0 ? 8 : _ref2$$thumbIconPaddi,
     _ref2$$thumbIconSize = _ref2.$thumbIconSize,
-    $thumbIconSize = _ref2$$thumbIconSize === void 0 ? 10 : _ref2$$thumbIconSize;
-  return css(["position:absolute;width:3px;height:100%;background:", ";z-index:3;cursor:col-resize;top:0;svg{display:block;position:absolute;top:", ";right:", ";background:", ";width:", ";height:", ";border-radius:8px;padding:", ";box-sizing:content-box;}"], color, "calc(50% - ".concat($thumbIconPadding + $thumbIconSize / 2, "px)"), "calc(50% - ".concat($thumbIconPadding + $thumbIconSize / 2, "px)"), color, "".concat($thumbIconSize, "px"), "".concat($thumbIconSize, "px"), "".concat($thumbIconPadding, "px"));
+    $thumbIconSize = _ref2$$thumbIconSize === void 0 ? 16 : _ref2$$thumbIconSize,
+    theme = _ref2.theme;
+  return css(["position:absolute;width:6px;height:100%;background:", ";z-index:3;cursor:col-resize;top:0;svg{display:block;position:absolute;top:", ";right:", ";background:", ";width:", ";height:", ";border-radius:8px;padding:", ";border:1px solid ", ";box-sizing:content-box;}"], color, "calc(50% - ".concat($thumbIconPadding + $thumbIconSize / 2, "px)"), "calc(50% - ".concat($thumbIconPadding + $thumbIconSize / 2, "px)"), $thumbColor, "".concat($thumbIconSize, "px"), "".concat($thumbIconSize, "px"), "".concat($thumbIconPadding, "px"), theme === null || theme === void 0 ? void 0 : theme.palette[PaletteColor.IconsPrimary]);
 });
@@ -53,3 +56,4 @@ var FallbackPreviewWrapper = /*#__PURE__*/styled.div.attrs({
   var backgroundColor = _ref3.backgroundColor,
-    gap = _ref3.gap;
+    _ref3$gap = _ref3.gap,
+    gap = _ref3$gap === void 0 ? 2 : _ref3$gap;
   return css(["display:flex;flex-direction:column;gap:", ";width:100%;height:100%;justify-content:center;align-items:center;background:", ";"], "".concat(gap, "px"), backgroundColor);
@@ -71,7 +75,12 @@ });
   componentId: "sc-111irnx-7"
-})(["position:relative;overflow:hidden;touch-action:none;"]);
+})(["position:relative;overflow:hidden;touch-action:none;height:100%;"]);
+var ImagesWrapper = /*#__PURE__*/styled.div.attrs({
+  className: generateClassNames(baseClassName, 'imagesWrapper')
+}).withConfig({
+  componentId: "sc-111irnx-8"
+})(["height:100%;"]);
 var Footer = /*#__PURE__*/styled.div.attrs({
   className: generateClassNames(baseClassName, 'footer')
 }).withConfig({
-  componentId: "sc-111irnx-8"
+  componentId: "sc-111irnx-9"
 })(function (_ref5) {
@@ -87,2 +96,3 @@ var theme = _ref5.theme;
   Handle: Handle,
+  ImagesWrapper: ImagesWrapper,
   ComparisonSlider: ComparisonSlider,
@@ -89,0 +99,0 @@ FallbackPreviewWrapper: FallbackPreviewWrapper,

core/index.d.ts

@@ -57,3 +57,3 @@ export { default as Accordion } from './accordion';
 export { default as Textarea } from './textarea';
-export { default as Tooltip } from './tooltip';
+export { default as Tooltip } from './tooltip-v2';
 export { default as TooltipV2 } from './tooltip-v2';
@@ -74,1 +74,2 @@ export { default as UploadInput } from './upload-input';
 export { default as TextWithHighlights } from './text-with-highlights';
+export { default as TimePicker } from './time-picker';

core/index.js

@@ -57,3 +57,3 @@ export { default as Accordion } from './accordion';
 export { default as Textarea } from './textarea';
-export { default as Tooltip } from './tooltip';
+export { default as Tooltip } from './tooltip-v2';
 export { default as TooltipV2 } from './tooltip-v2';
@@ -73,2 +73,3 @@ export { default as UploadInput } from './upload-input';
 export { default as EllipsedText } from './ellipsed-text';
-export { default as TextWithHighlights } from './text-with-highlights';
+export { default as TextWithHighlights } from './text-with-highlights';
+export { default as TimePicker } from './time-picker';

core/input-group/input-group.component.js

@@ -54,3 +54,2 @@ import _extends from "@babel/runtime/helpers/extends";
         size: size,
-        error: error,
         disabled: disabled
@@ -57,0 +56,0 @@ }, LabelPropsData || {}), label);

core/input/input.component.js

@@ -131,2 +131,5 @@ import _extends from "@babel/runtime/helpers/extends";
     } else if (clearIconClick) {
+      var _inputRef$current2;
+      event.stopPropagation();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
       clearIconClick(event);
@@ -223,3 +226,4 @@ }
     isHovering: rest.isHovering,
-    $isSelectedItems: Boolean(isSelectedItems || inputActions)
+    $isSelectedItems: Boolean(isSelectedItems || inputActions),
+    $hasInputActions: Boolean(inputActions)
   }, InputPropsData || {}), /*#__PURE__*/React.createElement(Styled.InputContent, null, renderIcon(iconStart, 'start'), renderField(), renderCopyIcon( /*#__PURE__*/React.createElement(CopyOutline, {
@@ -226,0 +230,0 @@ size: getIconSize(size, 'copy')

core/input/input.props.d.ts

@@ -19,3 +19,2 @@ import React from 'react';
     clearIcon?: React.ReactNode | IconFuncType;
-    iconType?: string;
     inputType?: string;
@@ -22,0 +21,0 @@ type?: any;

core/input/input.styles.d.ts

@@ -9,2 +9,3 @@ import type { InputProps } from './input.props';
         $error?: boolean;
+        $hasInputActions?: boolean;
     } & InputProps & {
@@ -11,0 +12,0 @@ theme: import("styled-components").DefaultTheme;

core/input/input.styles.js

@@ -72,4 +72,6 @@ import styled, { css } from 'styled-components';
     $isSelectedItems = _ref4$$isSelectedItem === void 0 ? false : _ref4$$isSelectedItem,
+    _ref4$$hasInputAction = _ref4.$hasInputActions,
+    $hasInputActions = _ref4$$hasInputAction === void 0 ? false : _ref4$$hasInputAction,
     theme = _ref4.theme;
-  return css(["position:relative;display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;cursor:text;transition:all 100ms ease-out;width:", ";pointer-events:", ";background-color:", ";border-radius:", ";border:1px solid ", ";color:", ";", " ", ";", "{", "}", " ", " &:hover{color:", ";}", ""], $fullWidth ? '100%' : '300px', disabled ? 'none' : 'auto', getInputBackgroundColor(readOnly, disabled), theme.shape.borderRadius[BRSize.Md], getInputBorderColor(readOnly, disabled), disabled ? theme.palette[PColor.TextPlaceholder] : theme.palette[PColor.TextPrimary], sizeInputMixin[size], $isSelectedItems && "\n      height: fit-content;\n\n      ".concat(Base, " {\n        max-width: fit-content;\n        min-width: 20px;\n        flex-grow: 1;\n        width: 40px;\n      }\n    "), Base, fontSizeInputMixin[size], !readOnly && !disabled && css(["&:focus-within{background-color:", "!important;border:1px solid ", ";&:hover{border:1px solid ", ";", "{color:", ";}}}", " &:hover{background-color:", ";border:1px solid ", ";", "{color:", ";}}"], theme.palette[PColor.BackgroundSecondary], theme.palette[PColor.AccentStateless], theme.palette[PColor.AccentStateless], Icon, theme.palette[PColor.IconsPrimary], isHovering && css(["", "{color:", ";}"], Icon, theme.palette[PColor.IconsPrimaryHover]), theme.palette[PColor.BackgroundStateless], theme.palette[PColor.BordersPrimaryHover], Icon, theme.palette[PColor.IconsPrimaryHover]), disabled && css(["", "{color:", ";}"], Icon, theme.palette[PColor.IconsMuted]), getInputTextColor(readOnly, disabled), $error && errorMixin);
+  return css(["position:relative;display:flex;flex-direction:", ";", " box-sizing:border-box;column-gap:8px;cursor:text;transition:all 100ms ease-out;width:", ";pointer-events:", ";background-color:", ";border-radius:", ";border:1px solid ", ";color:", ";", " ", ";", "{", "}", " ", " &:hover{color:", ";}", ""], !$hasInputActions ? 'row' : 'column', $hasInputActions && 'align-items: stretch;', $fullWidth ? '100%' : '300px', disabled ? 'none' : 'auto', getInputBackgroundColor(readOnly, disabled), theme.shape.borderRadius[BRSize.Md], getInputBorderColor(readOnly, disabled), disabled ? theme.palette[PColor.TextPlaceholder] : theme.palette[PColor.TextPrimary], sizeInputMixin[size], $isSelectedItems && "\n      height: fit-content;\n\n      ".concat(Base, " {\n        max-width: fit-content;\n        min-width: 20px;\n        flex-grow: 1;\n        width: 40px;\n      }\n    "), Base, fontSizeInputMixin[size], !readOnly && !disabled && css(["&:focus-within{background-color:", "!important;border:1px solid ", ";&:hover{border:1px solid ", ";", "{color:", ";}}}", " &:hover{background-color:", ";border:1px solid ", ";", "{color:", ";}}"], theme.palette[PColor.BackgroundSecondary], theme.palette[PColor.AccentStateless], theme.palette[PColor.AccentStateless], Icon, theme.palette[PColor.IconsPrimary], isHovering && css(["", "{color:", ";}"], Icon, theme.palette[PColor.IconsPrimaryHover]), theme.palette[PColor.BackgroundStateless], theme.palette[PColor.BordersPrimaryHover], Icon, theme.palette[PColor.IconsPrimaryHover]), disabled && css(["", "{color:", ";}"], Icon, theme.palette[PColor.IconsMuted]), getInputTextColor(readOnly, disabled), $error && errorMixin);
 });
@@ -131,3 +133,3 @@ var ClearIcon = /*#__PURE__*/styled.span.attrs({
   componentId: "sc-150k0cz-12"
-})(["display:flex;align-items:center;width:100%;box-sizing:border-box;"]);
+})(["display:flex;align-items:center;width:100%;column-gap:8px;box-sizing:border-box;"]);
 var Styled = applyDisplayNames({
@@ -134,0 +136,0 @@ Input: Input,

core/label/label.component.js

 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "iconStart", "iconEnd", "error", "disabled", "size", "type"];
+var _excluded = ["children", "iconStart", "iconEnd", "error", "disabled", "size"];
 import React, { useState, useRef } from 'react';
 import { intrinsicComponent } from '../../utils/functions';
-import { Type } from './types';
 import Styled from './label.styles';
@@ -17,4 +16,2 @@ var Label = intrinsicComponent(function (_ref, ref) {
     size = _ref.size,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? Type.Default : _ref$type,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -48,4 +45,3 @@ var textRef = useRef(null);
     disabled: disabled,
-    size: size,
-    type: type
+    size: size
   }, rest), iconStart && renderIcon(iconStart, false), /*#__PURE__*/React.createElement(Styled.Text, {
@@ -52,0 +48,0 @@ title: getTextTooltip(),

core/label/label.props.d.ts

 import type { PropsWithChildren } from 'react';
 import { IconProps } from '@scaleflex/icons/icon.props';
 import type { Values } from '../../utils/types';
-import { Type } from './types';
 import { LabelSize } from './types/size';
-export type LabelTypesType = Values<typeof Type>;
 export type LabelSizeType = Values<typeof LabelSize>;
 export interface LabelProps extends PropsWithChildren, React.HTMLAttributes<HTMLLabelElement> {
-    type?: LabelTypesType;
     iconStart?: React.ReactNode | ((props: IconProps) => React.ReactNode);
@@ -15,3 +12,2 @@ iconEnd?: React.ReactNode | ((props: IconProps) => React.ReactNode);
     size?: LabelSizeType;
-    htmlFor?: string;
 }

core/label/types/index.d.ts

@@ -1,1 +0,1 @@
-export * from './type';
+export * from './size';

core/label/types/index.js

@@ -1,1 +0,1 @@
-export * from './type';
+export * from './size';

core/menu-item/menu-item-icon.component.js

@@ -19,3 +19,4 @@ import _extends from "@babel/runtime/helpers/extends";
   var children = _ref.children,
-    disabled = _ref.disabled,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$size = _ref.size,
@@ -22,0 +23,0 @@ size = _ref$size === void 0 ? Size.Md : _ref$size,

core/menu-item/menu-item.component.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["list", "depth", "children", "disableHover", "noOptionsText", "disabled", "enableScrollIntoView", "isFocused"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -13,14 +11,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import Styled from './menu-item.styles';
-var MenuItem = intrinsicComponent(function (_ref, ref) {
-  var list = _ref.list,
-    _ref$depth = _ref.depth,
-    depth = _ref$depth === void 0 ? 0 : _ref$depth,
-    children = _ref.children,
-    disableHover = _ref.disableHover,
-    noOptionsText = _ref.noOptionsText,
-    disabled = _ref.disabled,
-    enableScrollIntoView = _ref.enableScrollIntoView,
-    _ref$isFocused = _ref.isFocused,
-    isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
-    props = _objectWithoutProperties(_ref, _excluded);
+var MenuItem = intrinsicComponent(function (props, ref) {
+  var list = props.list,
+    children = props.children,
+    disableHover = props.disableHover,
+    disabled = props.disabled,
+    enableScrollIntoView = props.enableScrollIntoView,
+    _props$isFocused = props.isFocused,
+    isFocused = _props$isFocused === void 0 ? false : _props$isFocused,
+    active = props.active,
+    value = props.value,
+    dividerStyle = props.dividerStyle,
+    _props$depth = props.depth,
+    depth = _props$depth === void 0 ? 0 : _props$depth;
   var menuItemRef = useRef(null);
@@ -46,6 +45,6 @@ var _React$useState = React.useState(null),
   useEffect(function () {
-    if ((props.active || isFocused) && enableScrollIntoView) {
+    if ((active || isFocused) && enableScrollIntoView) {
       handleScroll();
     }
-  }, [props.active, isFocused]);
+  }, [active, isFocused]);
   var handleSelectedId = function handleSelectedId(ev, selected, depthLevel) {
@@ -76,6 +75,6 @@ var updatedArray = selectedIds.slice(0);
           enableOverlay: false
-        }, option.subMenuProps), /*#__PURE__*/React.createElement(MenuItem, _extends({
+        }, option.subMenuProps), /*#__PURE__*/React.createElement(MenuItem, _extends({}, props, {
           list: option.subList,
           depth: newDepthLevel
-        }, props)));
+        })));
       }
@@ -85,3 +84,4 @@ if (option.content === 'divider') {
           divider: true,
-          key: option.key
+          key: option.key,
+          style: option.dividerStyle
         });
@@ -98,3 +98,3 @@ }
         ref: ref,
-        isFocused: isFocused,
+        $isFocused: isFocused,
         $active: Boolean(option.active),
@@ -118,10 +118,10 @@ onClick: function onClick(event) {
   if (!list) {
-    if (props.value === 'divider') {
+    if (value === 'divider') {
       return /*#__PURE__*/React.createElement(Styled.MenuItemWrapper, {
         divider: true,
-        key: props.value
+        key: value,
+        style: dividerStyle
       });
     }
     return /*#__PURE__*/React.createElement(Styled.MenuItemWrapper, {
-      $noOptionsText: Boolean(noOptionsText),
       disabled: Boolean(disabled)
@@ -131,5 +131,5 @@ }, /*#__PURE__*/React.createElement(Styled.MenuItem, _extends({}, props, {
       disableHover: disableHover,
-      noOptionsText: noOptionsText,
       disabled: disabled,
-      isFocused: isFocused
+      $isFocused: isFocused,
+      $active: active
     }), children));
@@ -140,13 +140,2 @@ }
 MenuItem.displayName = 'MenuItem';
-export default MenuItem;
-// list: PT.arrayOf(
-//   PT.shape({
-//     key: PT.string.isRequired,
-//     content: PT.oneOfType([PT.string, PT.node]).isRequired,
-//     prefix: PT.oneOfType([PT.string, PT.node]),
-//     subList: PT.arrayOf(PT.object),
-//     suffix: PT.oneOfType([PT.string, PT.node]),
-//     onClick: PT.func,
-//     disabled: PT.bool,
-//   })
-// ),
+export default MenuItem;

core/menu-item/menu-item.props.d.ts

@@ -18,2 +18,3 @@ import type { PropsWithChildren } from 'react';
     className?: string;
+    dividerStyle?: React.CSSProperties;
     disableHover?: boolean;
@@ -29,5 +30,3 @@ };
     size?: MenuItemSizeType;
-    icon?: React.ReactNode;
     active?: boolean;
-    noOptionsText?: boolean;
     disabled?: boolean;
@@ -39,3 +38,4 @@ value?: string | number | boolean | null;
     isFocused?: boolean;
+    dividerStyle?: React.CSSProperties;
     enableScrollIntoView?: boolean;
 }

core/menu-item/menu-item.styles.d.ts

@@ -7,3 +7,2 @@ import type { MenuItemProps } from './menu-item.props';
         divider?: boolean;
-        $noOptionsText?: boolean;
         disabled?: boolean;
@@ -17,2 +16,3 @@ } & {
         $active?: boolean;
+        $isFocused: boolean;
     } & MenuItemProps & {
@@ -19,0 +19,0 @@ theme: import("styled-components").DefaultTheme;

core/menu-item/menu-item.styles.js

@@ -35,8 +35,6 @@ import styled, { css } from 'styled-components';
     divider = _ref2$divider === void 0 ? false : _ref2$divider,
-    _ref2$$noOptionsText = _ref2.$noOptionsText,
-    $noOptionsText = _ref2$$noOptionsText === void 0 ? false : _ref2$$noOptionsText,
     _ref2$disabled = _ref2.disabled,
     disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
     theme = _ref2.theme;
-  return css(["", " ", ""], divider && css(["width:100%;height:1px;background:", ";box-sizing:border-box;margin:4px 0;"], theme.palette[PColor.BordersSecondary]), ($noOptionsText || disabled) && css(["color:", ";"], theme.palette[PColor.ButtonDisabledText]));
+  return css(["", " ", ""], divider && css(["width:100%;height:1px;background:", ";box-sizing:border-box;margin:4px 0;"], theme.palette[PColor.BordersSecondary]), disabled && css(["color:", ";"], theme.palette[PColor.ButtonDisabledText]));
 });
@@ -54,6 +52,5 @@ var MenuItem = /*#__PURE__*/styled.div.attrs({
     disableHover = _ref3$disableHover === void 0 ? false : _ref3$disableHover,
-    noOptionsText = _ref3.noOptionsText,
     disabled = _ref3.disabled,
-    isFocused = _ref3.isFocused;
-  return css(["display:flex;justify-content:space-between;flex-direction:row;align-items:center;width:100%;background:", ";color:", ";cursor:pointer;box-sizing:border-box;transition:all 100ms ease-out;", " &:focus-within,&:focus,&:hover{", ";", "}", " ", ""], theme.palette[$active ? PColor.BackgroundActive : PColor.BackgroundSecondary], theme.palette[PColor.TextPrimary], sizeMenuItemMixin[size], !disableHover && css(["background-color:", ";"], theme.palette[PColor.BackgroundHover]), (noOptionsText || disabled) && css(["cursor:default;background-color:white;"]), (noOptionsText || disabled) && css(["& > svg{path{fill:", ";}}color:", ";"], theme.palette[PColor.ButtonDisabledText], theme.palette[PColor.ButtonDisabledText]), isFocused && !disableHover && css(["background-color:", ";"], theme.palette[PColor.BackgroundHover]));
+    $isFocused = _ref3.$isFocused;
+  return css(["display:flex;justify-content:space-between;flex-direction:row;align-items:center;width:100%;background:", ";color:", ";cursor:pointer;box-sizing:border-box;transition:all 100ms ease-out;", " &:focus-within,&:focus,&:hover{", ";", "}", " ", ""], theme.palette[$active ? PColor.BackgroundActive : PColor.BackgroundSecondary], theme.palette[PColor.TextPrimary], sizeMenuItemMixin[size], !disableHover && css(["background-color:", ";"], theme.palette[PColor.BackgroundHover]), disabled && css(["cursor:default;background-color:white;"]), disabled && css(["& > svg{path{fill:", ";}}color:", ";"], theme.palette[PColor.ButtonDisabledText], theme.palette[PColor.ButtonDisabledText]), $isFocused && !disableHover && css(["background-color:", ";"], theme.palette[PColor.BackgroundHover]));
 });
@@ -60,0 +57,0 @@ var MenuPrefix = /*#__PURE__*/styled.div.attrs({

core/menu/menu.component.js

 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "open", "anchorElPosition", "anchorEl", "onClose", "containerProps", "alignCenter", "maxHeight", "position", "popperOptions", "enableOverlay", "zIndex", "hideScroll", "scroll", "enableUnderlayingEvent", "popperWrapperStyles"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+var _excluded = ["children", "anchorEl", "maxHeight", "position", "zIndex", "open", "enableOverlay", "hideScroll", "enableUnderlayingEvent", "containerProps", "popperOptions", "popperWrapperStyles", "onClose"];
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { intrinsicComponent } from '../../utils/functions';
@@ -15,10 +12,3 @@ import { Position } from '../popper/types';
   var children = _ref.children,
-    _ref$open = _ref.open,
-    open = _ref$open === void 0 ? false : _ref$open,
-    anchorElPosition = _ref.anchorElPosition,
     anchorEl = _ref.anchorEl,
-    onClose = _ref.onClose,
-    _ref$containerProps = _ref.containerProps,
-    containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
-    alignCenter = _ref.alignCenter,
     _ref$maxHeight = _ref.maxHeight,
@@ -28,14 +18,17 @@ maxHeight = _ref$maxHeight === void 0 ? 250 : _ref$maxHeight,
     position = _ref$position === void 0 ? Position.BottomStart : _ref$position,
-    popperOptions = _ref.popperOptions,
+    zIndex = _ref.zIndex,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open,
     _ref$enableOverlay = _ref.enableOverlay,
     enableOverlay = _ref$enableOverlay === void 0 ? true : _ref$enableOverlay,
-    zIndex = _ref.zIndex,
     _ref$hideScroll = _ref.hideScroll,
     hideScroll = _ref$hideScroll === void 0 ? true : _ref$hideScroll,
-    _ref$scroll = _ref.scroll,
-    scroll = _ref$scroll === void 0 ? true : _ref$scroll,
     _ref$enableUnderlayin = _ref.enableUnderlayingEvent,
     enableUnderlayingEvent = _ref$enableUnderlayin === void 0 ? false : _ref$enableUnderlayin,
+    _ref$containerProps = _ref.containerProps,
+    containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
+    popperOptions = _ref.popperOptions,
     _ref$popperWrapperSty = _ref.popperWrapperStyles,
     popperWrapperStyles = _ref$popperWrapperSty === void 0 ? {} : _ref$popperWrapperSty,
+    onClose = _ref.onClose,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -53,3 +46,3 @@ var _useState = useState(null),
     var _anchorEl$getBounding;
-    var defaultPosition = _objectSpread({
+    var defaultPosition = {
       top: 0,
@@ -59,3 +52,3 @@ left: 0,
       width: 0
-    }, anchorElPosition || {});
+    };
     var defaultRect = new DOMRect(defaultPosition.left, defaultPosition.top, defaultPosition.width, defaultPosition.height);
@@ -80,3 +73,3 @@ setRect((_anchorEl$getBounding = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect()) !== null && _anchorEl$getBounding !== void 0 ? _anchorEl$getBounding : defaultRect);
     updateRect();
-  }, [anchorElPosition, updateRect]);
+  }, [updateRect]);
   useEffect(function () {
@@ -102,20 +95,17 @@ if (hideScroll) {
     ref: menuRef,
-    position: position || 'bottom-start',
-    open: Boolean(anchorEl),
+    position: position,
+    open: open,
     anchorEl: anchorEl,
-    overlay: Boolean(enableOverlay),
-    onClick: handleClose,
+    overlay: enableOverlay,
     popperOptions: popperOptions,
     zIndex: zIndex,
     enableUnderlayingEvent: enableUnderlayingEvent,
-    wrapperStyles: popperWrapperStyles
-  }, /*#__PURE__*/React.createElement(Styled.Menu, _extends({}, containerProps, {
-    alignCenter: Boolean(alignCenter),
-    scroll: scroll,
-    rect: rect
-  }, rest, {
+    wrapperStyles: popperWrapperStyles,
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(Styled.Menu, _extends({
     ref: ref,
-    maxHeight: maxHeight
-  }), children));
+    $maxHeight: maxHeight,
+    $rect: rect
+  }, containerProps, rest), children));
 });
 export default Menu;

core/menu/menu.props.d.ts

@@ -8,19 +8,14 @@ import type { PropsWithChildren } from 'react';
 export interface MenuProps extends PropsWithChildren, React.HTMLAttributes<HTMLDivElement> {
-    open?: boolean;
-    anchorElPosition?: DOMRect;
+    open: boolean;
     anchorEl?: AnchorElType;
-    onClose?: (event: React.MouseEvent<HTMLDivElement>) => void;
     containerProps?: object;
-    alignCenter?: boolean;
     maxHeight?: string | number;
     position?: PopperPositionType;
     popperOptions?: PopperOptions;
+    popperWrapperStyles?: React.CSSProperties;
     enableOverlay?: boolean;
+    enableUnderlayingEvent?: boolean;
     zIndex?: number;
     hideScroll?: boolean;
-    scroll?: boolean;
-    enableUnderlayingEvent?: boolean;
-    popperWrapperStyles?: React.CSSProperties;
-    style?: React.CSSProperties;
-    list?: object;
+    onClose?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }

core/menu/menu.styles.d.ts

@@ -5,6 +5,4 @@ declare const Styled: {
     }>, never>, {
-        rect: DOMRect;
-        alignCenter: boolean;
-        maxHeight?: string | number;
-        scroll?: boolean;
+        $rect: DOMRect;
+        $maxHeight?: string | number;
     } & {
@@ -11,0 +9,0 @@ theme: import("styled-components").DefaultTheme;

core/menu/menu.styles.js

@@ -21,8 +21,7 @@ import styled, { css, keyframes } from 'styled-components';
 })(function (_ref) {
-  var rect = _ref.rect,
-    theme = _ref.theme,
-    scroll = _ref.scroll,
-    _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? '' : _ref$maxHeight;
-  return css(["min-width:", "px;width:195px;min-height:16px;overflow-x:hidden;overflow-y:auto;transition:opacity 250ms cubic-bezier(0.4,0,0,1),transform 250ms cubic-bezier(0.4,0,0,1),margin-top 250ms cubic-bezier(0.4,0,0,1);outline:0;box-shadow:0 2px 4px ", ";border-radius:", ";padding:4px 0;background-color:", ";", " ", " margin-top:4px;", ""], rect.width, theme.palette[PColor.MediumShadow], theme.shape.borderRadius[BRSize.Md], theme.palette[PColor.BackgroundStateless], scroll && scrollBar, maxHeight && css(["max-height:", ";"], Number.isNaN(+maxHeight) ? maxHeight : "".concat(maxHeight, "px")), fadeInAnimation);
+  var theme = _ref.theme,
+    _ref$$maxHeight = _ref.$maxHeight,
+    $maxHeight = _ref$$maxHeight === void 0 ? '' : _ref$$maxHeight,
+    $rect = _ref.$rect;
+  return css(["min-width:", "px;width:195px;min-height:16px;overflow-x:hidden;overflow-y:auto;transition:opacity 250ms cubic-bezier(0.4,0,0,1),transform 250ms cubic-bezier(0.4,0,0,1),margin-top 250ms cubic-bezier(0.4,0,0,1);outline:0;box-shadow:0 2px 4px ", ";border-radius:", ";padding:4px 0;background-color:", ";margin-top:4px;", " ", " ", ""], $rect.width, theme.palette[PColor.MediumShadow], theme.shape.borderRadius[BRSize.Md], theme.palette[PColor.BackgroundStateless], scrollBar, fadeInAnimation, $maxHeight && css(["max-height:", ";"], Number.isNaN(+$maxHeight) ? $maxHeight : "".concat($maxHeight, "px")));
 });
@@ -29,0 +28,0 @@ var Styled = applyDisplayNames({

core/modal/modal.component.js

@@ -12,6 +12,4 @@ import _extends from "@babel/runtime/helpers/extends";
 import ModalMenuContext from './modal-menu-context';
+import { isValidSingleFragmentChildren } from './modal.utils';
 import Styled from './modal.styles';
-var isValidSingleFragmentChildren = function isValidSingleFragmentChildren(children) {
-  return children && /*#__PURE__*/isValidElement(children) && React.Children.count(children) === 1 && children.type === React.Fragment;
-};
 var Modal = intrinsicComponent(function (_ref, ref) {
@@ -35,4 +33,2 @@ var _children = _ref.children,
   var children = isValidSingleFragmentChildren(_children) ? _children.props.children : _children;
-
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   var target = document.querySelector('body');
@@ -94,4 +90,6 @@ useEffect(function () {
   };
-  return /*#__PURE__*/createPortal(render(), target);
+
+  // we use fragments only to for storybook to detect auto props generated in stories
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal(render(), target));
 });
 export default Modal;

core/popup/popup.component.js

@@ -70,4 +70,6 @@ import _extends from "@babel/runtime/helpers/extends";
   };
-  return /*#__PURE__*/createPortal(render(), target);
+
+  // we use fragments only to for storybook to detect auto props generated in stories
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal(render(), target));
 });
 export default Popup;

core/search/search.props.d.ts

@@ -1,3 +0,6 @@
-import type { InputProps } from '../input';
-export interface SearchProps extends InputProps, Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+import { InputSizeType } from '../input/input.props';
+export interface SearchProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+    size?: InputSizeType;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }

core/select-group/select-group.component.js

 import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "size", "error", "label", "placeholder", "hint", "LabelProps", "SelectProps", "selectProps", "scroll", "fullWidth", "showSelectionKey", "value", "multiple", "hideMenuItemsActions", "onChange", "readOnly", "disabled", "showClearIcon"];
+var _excluded = ["children", "size", "error", "label", "placeholder", "hint", "LabelProps", "SelectProps", "selectProps", "fullWidth", "showSelectionKey", "value", "multiple", "hideMenuItemsActions", "onChange", "onClickClearIcon", "readOnly", "disabled", "showClearIcon"];
 import React from 'react';
@@ -22,4 +22,2 @@ import { intrinsicComponent } from '../../utils/functions';
     selectProps = _ref.selectProps,
-    _ref$scroll = _ref.scroll,
-    scroll = _ref$scroll === void 0 ? true : _ref$scroll,
     _ref$fullWidth = _ref.fullWidth,
@@ -33,2 +31,3 @@ fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     onChange = _ref.onChange,
+    onClickClearIcon = _ref.onClickClearIcon,
     _ref$readOnly = _ref.readOnly,
@@ -50,5 +49,3 @@ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       }
-      return /*#__PURE__*/React.createElement(Label, _extends({
-        error: error
-      }, LabelPropsData || {}), label);
+      return /*#__PURE__*/React.createElement(Label, LabelPropsData || {}, label);
     }
@@ -79,3 +76,2 @@ return null;
     size: size,
-    scroll: scroll,
     onChange: onChange,
@@ -91,5 +87,6 @@ multiple: multiple,
     hideMenuItemsActions: hideMenuItemsActions,
-    showClearIcon: showClearIcon
+    showClearIcon: showClearIcon,
+    onClickClearIcon: onClickClearIcon
   }), children), renderHint());
 });
 export default SelectGroup;

core/select-group/select-group.props.d.ts

@@ -12,6 +12,6 @@ import type { LabelProps } from '../label';
     LabelProps?: LabelProps;
+    onClickClearIcon?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     SelectProps?: SelectProps;
     selectProps?: React.InputHTMLAttributes<HTMLInputElement>;
     fullWidth?: boolean;
-    scroll?: boolean;
     readOnly?: boolean;
@@ -18,0 +18,0 @@ showSelectionKey?: boolean;

core/select/select.component.js

 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "size", "error", "multiple", "onChange", "value", "fullWidth", "selectProps", "MenuProps", "readOnly", "disabled", "scroll", "placeholder", "showSelectionKey", "hideMenuItemsActions", "showClearIcon", "renderLabel", "onRequestClose", "hideEllipsis"];
+var _excluded = ["children", "size", "error", "multiple", "onChange", "onClickClearIcon", "value", "fullWidth", "selectProps", "MenuProps", "readOnly", "disabled", "placeholder", "showSelectionKey", "hideMenuItemsActions", "showClearIcon", "renderLabel", "onRequestClose", "hideEllipsis"];
 import React, { useState } from 'react';
@@ -24,2 +24,3 @@ import PT from 'prop-types';
     onChange = _ref.onChange,
+    onClickClearIcon = _ref.onClickClearIcon,
     value = _ref.value,
@@ -33,4 +34,2 @@ _ref$fullWidth = _ref.fullWidth,
     disabled = _ref.disabled,
-    _ref$scroll = _ref.scroll,
-    scroll = _ref$scroll === void 0 ? true : _ref$scroll,
     placeholder = _ref.placeholder,
@@ -67,2 +66,5 @@ showSelectionKey = _ref.showSelectionKey,
     }
+    if (typeof onClickClearIcon === 'function') {
+      onClickClearIcon(event);
+    }
   };
@@ -78,3 +80,2 @@ return /*#__PURE__*/React.createElement(Styled.Container, {
     readOnly: readOnly,
-    showSelectionKey: showSelectionKey,
     isValueExists: isValueExists,
@@ -104,7 +105,7 @@ onClick: readOnly || disabled ? undefined : handleClick
   })), /*#__PURE__*/React.createElement(Styled.Input, selectProps)), /*#__PURE__*/React.createElement(Menu, _extends({
-    onClose: handleClose,
-    scroll: scroll,
+    onClose: handleClose
+  }, MenuProps, {
     open: open,
     anchorEl: anchorEl
-  }, MenuProps), React.Children.map(children, function (child) {
+  }), React.Children.map(children, function (child) {
     return renderOption(child, {
@@ -111,0 +112,0 @@ value: value,

core/select/select.props.d.ts

@@ -16,4 +16,5 @@ import type { Values } from '../../utils/types';
     onChange?: (value: SelectSimpleValueType | SelectSimpleValueType[]) => void;
+    onClickClearIcon?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     selectProps?: React.InputHTMLAttributes<HTMLInputElement>;
-    MenuProps?: MenuProps;
+    MenuProps?: Omit<MenuProps, 'open'>;
     readOnly?: boolean;
@@ -24,3 +25,2 @@ disabled?: boolean;
     hideMenuItemsActions?: boolean;
-    scroll?: boolean;
     onRequestClose?: () => void;
@@ -27,0 +27,0 @@ renderLabel?: (value: SelectSimpleValueType | SelectSimpleValueType[]) => React.ReactNode;

core/select/select.styles.d.ts

@@ -10,6 +10,7 @@ import type { SelectProps, SelectSizeType } from './select.props';
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>, never>, "theme" | "$fullWidth" | "$error" | keyof import("../input").InputProps | "$isSelectedItems"> & {
+    }>, never>, "theme" | "$fullWidth" | "$error" | keyof import("../input").InputProps | "$isSelectedItems" | "$hasInputActions"> & {
         $isSelectedItems?: boolean;
         $fullWidth?: boolean;
         $error?: boolean;
+        $hasInputActions?: boolean;
     } & import("../input").InputProps & {
@@ -19,6 +20,7 @@ theme: import("styled-components").DefaultTheme;
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>, never>, "theme" | "$fullWidth" | "$error" | keyof import("../input").InputProps | "$isSelectedItems"> & {
+    }>, never>, "theme" | "$fullWidth" | "$error" | keyof import("../input").InputProps | "$isSelectedItems" | "$hasInputActions"> & {
         $isSelectedItems?: boolean;
         $fullWidth?: boolean;
         $error?: boolean;
+        $hasInputActions?: boolean;
     } & import("../input").InputProps & {
@@ -25,0 +27,0 @@ theme: import("styled-components").DefaultTheme;

core/select/select.utils.js

@@ -87,8 +87,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 };
-var _getOptionValue = function getOptionValue(option) {
+var getOptionValue = function getOptionValue(option) {
   var children = option.props ? option.props.children : option;
   if (Array.isArray(children)) return children.map(function (child) {
-    return _getOptionValue(child);
+    return getOptionValue(child);
   }).join(' ');
-  if (_typeof(children) === 'object') return _getOptionValue(children.props.children);
+  if (_typeof(children) === 'object') return getOptionValue(children.props.children);
   return children;
@@ -101,5 +101,5 @@ };
       if (Array.isArray(child)) {
-        child = _getOptionValue(child[1]);
+        child = getOptionValue(child[1]);
       } else {
-        child = _getOptionValue(child);
+        child = getOptionValue(child);
       }
@@ -106,0 +106,0 @@ }

core/switcher/switcher.props.d.ts

@@ -11,5 +11,4 @@ import React, { ChangeEvent } from 'react';
     readOnly?: boolean;
-    $disabled?: boolean;
     disabled?: boolean;
     size?: SwitcherSizeType;
 }

core/table-cell/table-cell.component.js

@@ -9,5 +9,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import Styled from './table-cell.styles';
+import { Align } from './types';
 var TableCell = intrinsicComponent(function (_ref, ref) {
   var _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'left' : _ref$align,
+    align = _ref$align === void 0 ? Align.Left : _ref$align,
     paddingProp = _ref.padding,
@@ -14,0 +15,0 @@ sizeProp = _ref.size,

core/tag-field/tag-field.component.js

@@ -5,3 +5,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["suggestedTags", "tags", "onAdd", "onRemove", "onGenerate", "onClear", "onValidate", "placeholder", "disabled", "readOnly", "label", "suggestionLabel", "suggestionTooltipMessage", "LabelProps", "error", "hint", "size", "crossIcon", "loading", "appliedValue", "disableOnEnter", "showTooltip", "copyTextMessage", "copySuccessIcon", "submitOnSpace", "preventSubmitOnBlur", "hideCopyIcon", "hideClearButton", "showGenerateTagsButton", "generateTagsButtonLabel", "clearTagsButtonLabel", "alwaysShowSuggestedTags", "placeholderAlwaysVisible", "filterInputWidth", "fullWidth", "getTagLabel", "getTagValue", "getTagIcon", "suggestionsFilter", "onFocus", "onBlur"];
+var _excluded = ["suggestedTags", "tags", "onAdd", "onRemove", "onGenerate", "onClear", "onValidate", "placeholder", "disabled", "readOnly", "label", "suggestionLabel", "suggestionTooltipMessage", "LabelProps", "error", "hint", "size", "crossIcon", "loading", "disableOnEnter", "showTooltip", "copyTextMessage", "copySuccessIcon", "submitOnSpace", "preventSubmitOnBlur", "hideCopyIcon", "hideClearButton", "showGenerateTagsButton", "generateTagsButtonLabel", "clearTagsButtonLabel", "alwaysShowSuggestedTags", "placeholderAlwaysVisible", "filterInputWidth", "fullWidth", "getTagLabel", "getTagValue", "getTagIcon", "suggestionsFilter", "onFocus", "onBlur"];
 import React, { useState, useMemo, useEffect } from 'react';
@@ -54,3 +54,2 @@ import { InfoOutline, CopyOutline } from '@scaleflex/icons';
     loading = _ref.loading,
-    appliedValue = _ref.appliedValue,
     disableOnEnter = _ref.disableOnEnter,
@@ -217,10 +216,3 @@ showTooltip = _ref.showTooltip,
   };
-
-  // TODO remove when add clear all button
   useEffect(function () {
-    if (typeof appliedValue === 'string' && !appliedValue) {
-      setUserInput('');
-    }
-  }, [appliedValue]);
-  useEffect(function () {
     if (showCopyMessage) {
@@ -252,5 +244,3 @@ setTimeout(function () {
     fullWidth: fullWidth
-  }, /*#__PURE__*/React.createElement(Styled.TagInputFieldWrapper, null, label && /*#__PURE__*/React.createElement(Label, _extends({
-    error: tagsError
-  }, LabelPropsData || {}), label), /*#__PURE__*/React.createElement(Styled.Wrapper, null, /*#__PURE__*/React.createElement(Styled.TagFieldWrapper, _extends({
+  }, /*#__PURE__*/React.createElement(Styled.TagInputFieldWrapper, null, label && /*#__PURE__*/React.createElement(Label, LabelPropsData || {}, label), /*#__PURE__*/React.createElement(Styled.Wrapper, null, /*#__PURE__*/React.createElement(Styled.TagFieldWrapper, _extends({
     size: size,
@@ -257,0 +247,0 @@ error: tagsError,

core/tag-field/tag-field.props.d.ts

@@ -19,3 +19,2 @@ import type { Values } from '../../utils/types';
     onValidate?: (tagInput: string) => string | boolean;
-    appliedValue?: string;
     placeholder?: string;
@@ -22,0 +21,0 @@ readOnly?: boolean;

core/tag-field/tag-field.utils.d.ts

 import type { SuggestionsFilterFnType } from './tag-field.props';
-declare const tagsSuggestionsFilter: SuggestionsFilterFnType;
-export { tagsSuggestionsFilter };
+export declare const tagsSuggestionsFilter: SuggestionsFilterFnType;

core/tag-field/tag-field.utils.js

 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { escapeRegExp } from '../../utils/functions';
-var tagsSuggestionsFilter = function tagsSuggestionsFilter(suggestedTags, userInput, getTagLabel, alwaysShowSuggestedTags) {
+export var tagsSuggestionsFilter = function tagsSuggestionsFilter(suggestedTags, userInput, getTagLabel, alwaysShowSuggestedTags) {
   if (!userInput && !alwaysShowSuggestedTags) {
@@ -18,3 +18,2 @@ return [];
   return suggestions;
-};
-export { tagsSuggestionsFilter };
+};

core/textarea/textarea.mixin.js

@@ -17,6 +17,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
   var font = _ref2.theme.typography.font;
-  return css(["padding:8px 12px;", ""], font[FV.InputMd]);
+  return css(["padding:9px 12px;", ""], font[FV.InputMd]);
 }), InputSize.Md, function (_ref3) {
   var font = _ref3.theme.typography.font;
-  return css(["padding:8px 16px;", ""], font[FV.InputLg]);
+  return css(["padding:9px 16px;", ""], font[FV.InputLg]);
 });

core/tooltip-v2/tooltip-v2.component.js

@@ -39,2 +39,11 @@ import _extends from "@babel/runtime/helpers/extends";
   if (hide) return children;
+  var childrenArray = React.Children.toArray(children);
+  if (childrenArray.length > 1) {
+    console.error('TooltipV2 only supports a single child.');
+    return null;
+  }
+  if (! /*#__PURE__*/React.isValidElement(childrenArray[0])) {
+    console.error('TooltipV2 only supports valid React elements.');
+    return null;
+  }
   return /*#__PURE__*/React.createElement(Styled.TooltipV2, _extends({
@@ -41,0 +50,0 @@ ref: ref,

core/tooltip/tooltip.component.js

@@ -11,2 +11,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import Popper from '../popper';
+
+// DEPRECATED COMPONENT
+// Replaced by TooltipV2
+
 var Tooltip = intrinsicComponent(function (_ref, ref) {
@@ -13,0 +17,0 @@ var children = _ref.children,

core/upload-input/upload-input.component.js

@@ -10,2 +10,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import Styled from './upload-input.styles';
+import { ButtonColor } from '../../utils/types';
 var UploadInput = intrinsicComponent(function (_ref, ref) {
@@ -16,3 +17,3 @@ var error = _ref.error,
     _ref$buttonColor = _ref.buttonColor,
-    buttonColor = _ref$buttonColor === void 0 ? 'primary' : _ref$buttonColor,
+    buttonColor = _ref$buttonColor === void 0 ? ButtonColor.Primary : _ref$buttonColor,
     _ref$placeholder = _ref.placeholder,
@@ -19,0 +20,0 @@ placeholder = _ref$placeholder === void 0 ? 'No file chosen' : _ref$placeholder,

hooks/use-drag.js

@@ -8,9 +8,9 @@ function useDrag(onMove, onStart, onEnd) {
   };
-  var _disableSliding = function disableSliding(e) {
+  var disableSliding = function disableSliding(e) {
     document.removeEventListener('mousemove', onDragging);
-    document.removeEventListener('mouseup', _disableSliding);
-    document.removeEventListener('mouseleave', _disableSliding);
+    document.removeEventListener('mouseup', disableSliding);
+    document.removeEventListener('mouseleave', disableSliding);
     document.removeEventListener('touchmove', onDragging);
-    document.removeEventListener('touchend', _disableSliding);
-    document.removeEventListener('touchcancel', _disableSliding);
+    document.removeEventListener('touchend', disableSliding);
+    document.removeEventListener('touchcancel', disableSliding);
     if (typeof onEnd === 'function') {
@@ -23,7 +23,7 @@ var _e$touches2;
     document.addEventListener('mousemove', onDragging);
-    document.addEventListener('mouseup', _disableSliding);
-    document.addEventListener('mouseleave', _disableSliding);
+    document.addEventListener('mouseup', disableSliding);
+    document.addEventListener('mouseleave', disableSliding);
     document.addEventListener('touchmove', onDragging);
-    document.addEventListener('touchend', _disableSliding);
-    document.addEventListener('touchcancel', _disableSliding);
+    document.addEventListener('touchend', disableSliding);
+    document.addEventListener('touchcancel', disableSliding);
     if (typeof onStart === 'function') {
@@ -30,0 +30,0 @@ var _e$touches3;

package.json

 {
   "name": "@scaleflex/ui",
-  "version": "2.11.7",
+  "version": "2.11.8",
   "author": "scaleflex",
@@ -5,0 +5,0 @@ "repository": "github:scaleflex/ui",

theme/roots/common-styles.js

@@ -5,3 +5,3 @@ import { createGlobalStyle /* , css */ } from 'styled-components';
 
-var CommonStyles = /*#__PURE__*/createGlobalStyle(["@keyframes spinner{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.Menu-open{overflow:hidden;}.Modal-open{overflow:hidden;}"]);
+var CommonStyles = /*#__PURE__*/createGlobalStyle(["@keyframes spinner{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.Menu-open{overflow:hidden;}.Modal-open{overflow:hidden;}.Drawer-open{overflow:hidden;}"]);
 export default CommonStyles;

theme/roots/palette/entity/default-palette.d.ts

@@ -21,2 +21,3 @@ import type { ColorsMap } from './colors-map';
         accent_0_5_5_opacity: string;
+        accent_0_7_opacity: string;
         accent_0_5_opacity: string;
@@ -146,2 +147,3 @@ accent_1_2_opacity: string;
         "green-0-2-Overlay": string;
+        "white-0-7-8-overlay": string;
     };
@@ -169,2 +171,3 @@ };
     "green-0-2-Overlay": string;
+    "white-0-7-8-overlay": string;
     link: string;
@@ -268,2 +271,3 @@ camera: string;
     accent_0_5_5_opacity: string;
+    accent_0_7_opacity: string;
     accent_0_5_opacity: string;
@@ -270,0 +274,0 @@ accent_1_2_opacity: string;

theme/roots/palette/entity/default-palette.js

@@ -10,3 +10,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
   text: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Color.TextPrimary, 'rgba(55, 65, 75, 1)'), Color.TextSecondary, 'rgba(118, 138, 159, 1)'), Color.TextSecondaryInvert, 'rgba(213, 216, 220, 1)'), Color.TextPlaceholder, 'rgba(169, 182, 194, 1)'), Color.TextWarning, 'rgba(196, 110, 0, 1)'), Color.TextError, 'rgba(185, 33, 46, 1)'), Color.TextInfo, 'rgba(35, 117, 171, 1)'),
-  accent: (_accent = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_accent, Color.AccentPrimary, 'rgba(104, 121, 235, 1)'), Color.AccentPrimaryHover, 'rgba(96, 111, 209, 1)'), Color.AccentPrimaryActive, 'rgba(73, 88, 188, 1)'), Color.AccentPrimaryDisabled, 'rgba(233, 238, 242, 1)'), Color.AccentSecondaryDisabled, '#F9FBFC'), Color.AccentStateless, 'rgba(104, 121, 235, 1)'), Color.AccentStateless_0_4_Opacity, 'rgba(104, 121, 235, 0.4)'), Color.Accent_0_5_5_Opacity, 'rgba(96, 111, 209, 0.55)'), Color.Accent_0_5_Opacity, 'rgba(104, 121, 235, 0.05)'), Color.Accent_1_2_Opacity, 'rgba(104, 121, 235, 0.12)'), _defineProperty(_defineProperty(_defineProperty(_accent, Color.Accent_1_8_Opacity, 'rgba(104, 121, 235, 0.18)'), Color.Accent_2_8_Opacity, 'rgba(104, 121, 235, 0.28)'), Color.Accent_4_0_Opacity, 'rgba(104, 121, 235, 0.4)')),
+  accent: (_accent = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_accent, Color.AccentPrimary, 'rgba(104, 121, 235, 1)'), Color.AccentPrimaryHover, 'rgba(96, 111, 209, 1)'), Color.AccentPrimaryActive, 'rgba(73, 88, 188, 1)'), Color.AccentPrimaryDisabled, 'rgba(233, 238, 242, 1)'), Color.AccentSecondaryDisabled, '#F9FBFC'), Color.AccentStateless, 'rgba(104, 121, 235, 1)'), Color.AccentStateless_0_4_Opacity, 'rgba(104, 121, 235, 0.4)'), Color.Accent_0_5_5_Opacity, 'rgba(96, 111, 209, 0.55)'), Color.Accent_0_7_Opacity, 'rgba(96, 111, 209, 0.7)'), Color.Accent_0_5_Opacity, 'rgba(104, 121, 235, 0.05)'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_accent, Color.Accent_1_2_Opacity, 'rgba(104, 121, 235, 0.12)'), Color.Accent_1_8_Opacity, 'rgba(104, 121, 235, 0.18)'), Color.Accent_2_8_Opacity, 'rgba(104, 121, 235, 0.28)'), Color.Accent_4_0_Opacity, 'rgba(104, 121, 235, 0.4)')),
   background: (_background = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_background, Color.BackgroundGrey, 'rgba(216, 224, 232, 1)'), Color.BackgroundStateless, 'rgba(255, 255, 255, 1)'), Color.BackgroundActive, 'rgba(243, 247, 250, 1)'), Color.BackgroundBaseLight, 'rgba(235, 239, 252, 1)'), Color.BackgroundBaseMedium, 'rgba(227, 231, 251, 1)'), Color.BackgroundPrimary, 'rgba(243, 245, 247, 1)'), Color.BackgroundPrimaryLight, 'rgba(243, 245, 247, 1)'), Color.BackgroundPrimaryHover, 'rgba(239, 243, 246, 1)'), Color.BackgroundPrimaryActive, 'rgba(93, 109, 126, 1)'), Color.BackgroundPrimary_0_5_Opacity, 'rgba(255, 255, 255, 0.500)'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_background, Color.BackgroundPrimaryStateless, '#CCD6DE'), Color.BackgroundSecondary, 'rgba(255, 255, 255, 1)'), Color.BackgroundHover, 'rgba(249, 251, 252, 1)'), Color.BackgroundGreen, 'rgba(237, 250, 244, 1)'), Color.BackgroundGreenMedium, 'rgba(227, 250, 239, 1)'), Color.BackgroundBlue, 'rgba(244, 249, 255, 1)'), Color.BackgroundRed, 'rgba(253, 244, 242, 1)'), Color.BackgroundRedLight, 'rgba(255, 245, 245, 1)'), Color.BackgroundRedMedium, 'rgba(247, 228, 230, 1)'), Color.BackgroundOrange, 'rgba(255, 249, 242, 1)'), _defineProperty(_background, Color.BackgroundTooltip, 'rgba(79, 98, 118, 1)')),
@@ -20,5 +20,5 @@ icons: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Color.IconsPrimary, 'rgba(118, 138, 159, 1)'), Color.IconsPrimaryOpacity_0_6, 'rgba(93, 109, 126, 0.600)'), Color.IconsSecondary, 'rgba(151, 166, 182, 1)'), Color.IconsPlaceholder, 'rgba(223, 231, 237, 1)'), Color.IconsInvert, 'rgba(255, 255, 255, 1)'), Color.IconsMuted, 'rgba(169, 182, 194, 1)'), Color.IconsPrimaryHover, 'rgba(79, 98, 118, 1)'), Color.IconsSecondaryHover, 'rgba(118, 138, 159, 1)'),
   uploader: (_uploader = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_uploader, Color.Link, 'rgba(250, 166, 68, 1)'), Color.Camera, 'rgba(73, 186, 224, 1)'), Color.GoogleDrive, 'rgba(81, 136, 238, 1)'), Color.Dropbox, 'rgba(17, 40, 124, 1)'), Color.OneDrive, 'rgba(40, 100, 186, 1)'), Color.Device, 'rgba(102, 73, 209, 1)'), Color.Instagram, 'rgba(244, 70, 154, 1)'), Color.Unsplash, 'rgba(173, 38, 220, 1)'), Color.FreeImages, 'rgba(16, 163, 135, 1)'), Color.FreeIcons, 'rgba(62, 207, 139, 1)'), _defineProperty(_defineProperty(_defineProperty(_uploader, Color.Canvas, 'rgba(36, 190, 202, 1)'), Color.Box, 'rgba(0, 97, 213, 1)'), Color.ScreenCast, 'rgba(48, 61, 78, 1)')),
-  extra: (_extra = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extra, Color.GradientRight, 'linear-gradient(270deg, #FFFFFF 1.56%, rgba(255, 255, 255, 0.89) 52.4%, rgba(255, 255, 255, 0.532165) 76.04%, rgba(255, 255, 255, 0) 100%)'), Color.Extra_0_3_Overlay, 'rgba(79, 98, 118, 0.3)'), Color.GradientRightActive, 'linear-gradient(270deg, #F3F7FA 1.56%, #F3F7FA 52.4%, rgba(243, 247, 250, 0.53) 76.04%, rgba(243, 247, 250, 0) 100%)'), Color.GradientRightHover, 'linear-gradient(270deg, #F9FBFC 1.56%, #F9FBFC 52.4%, rgba(249, 251, 252, 0.53) 76.04%, rgba(249, 251, 252, 0) 100%)'), Color.Extra_0_5_Overlay, 'rgba(79, 98, 118, 0.5)'), Color.Extra_0_7_Overlay, 'rgba(79, 98, 118, 0.7)'), Color.Extra_0_9_Overlay, 'rgba(79, 98, 118, 0.9)'), Color.Red_0_1_Overlay, 'rgba(232, 91, 70, 0.1)'), Color.Orange_0_1_Overlay, 'rgba(250, 157, 47, 0.1)'), Color.Accent_0_8_Overlay, 'rgba(104, 121, 235, 0.08)'), _defineProperty(_extra, Color.Green_0_2_Overlay, 'rgba(27, 161, 99, 0.2)'))
+  extra: (_extra = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_extra, Color.GradientRight, 'linear-gradient(270deg, #FFFFFF 1.56%, rgba(255, 255, 255, 0.89) 52.4%, rgba(255, 255, 255, 0.532165) 76.04%, rgba(255, 255, 255, 0) 100%)'), Color.Extra_0_3_Overlay, 'rgba(79, 98, 118, 0.3)'), Color.GradientRightActive, 'linear-gradient(270deg, #F3F7FA 1.56%, #F3F7FA 52.4%, rgba(243, 247, 250, 0.53) 76.04%, rgba(243, 247, 250, 0) 100%)'), Color.GradientRightHover, 'linear-gradient(270deg, #F9FBFC 1.56%, #F9FBFC 52.4%, rgba(249, 251, 252, 0.53) 76.04%, rgba(249, 251, 252, 0) 100%)'), Color.Extra_0_5_Overlay, 'rgba(79, 98, 118, 0.5)'), Color.Extra_0_7_Overlay, 'rgba(79, 98, 118, 0.7)'), Color.Extra_0_9_Overlay, 'rgba(79, 98, 118, 0.9)'), Color.Red_0_1_Overlay, 'rgba(232, 91, 70, 0.1)'), Color.Orange_0_1_Overlay, 'rgba(250, 157, 47, 0.1)'), Color.Accent_0_8_Overlay, 'rgba(104, 121, 235, 0.08)'), _defineProperty(_defineProperty(_extra, Color.Green_0_2_Overlay, 'rgba(27, 161, 99, 0.2)'), Color.WHITE_0_7_8_Overlay, 'rgba(255, 255, 255, 0.78)'))
 };
 export var lightPalette = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, groupedPalette.text), groupedPalette.accent), groupedPalette.background), groupedPalette.icons), groupedPalette.button), groupedPalette.link), groupedPalette.borders), groupedPalette.states), groupedPalette.flat), groupedPalette.uploader), groupedPalette.extra), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Color.ActiveSecondary, '#FFFFFF'), Color.ActiveSecondaryHover, 'rgba(104, 121, 235, 0.05)'), Color.Tag, '#889AAC'), Color.StatesErrorDisabledText, 'rgba(185, 33, 46, 0.3)'), Color.LightShadow, 'rgba(146, 166, 188, 0.2)'), Color.MediumShadow, 'rgba(146, 166, 188, 0.24)'), Color.LargeShadow, 'rgba(146, 166, 188, 0.32)'), Color.XLargeShadow, 'rgba(146, 166, 188, 0.5)'));
 export var defaultPalette = lightPalette;

utils/types/palette/color.d.ts

@@ -18,2 +18,3 @@ export declare const Color: {
     readonly Accent_0_5_Opacity: "accent_0_5_opacity";
+    readonly Accent_0_7_Opacity: "accent_0_7_opacity";
     readonly Accent_1_2_Opacity: "accent_1_2_opacity";
@@ -115,2 +116,3 @@ readonly Accent_1_8_Opacity: "accent_1_8_opacity";
     readonly Green_0_2_Overlay: "green-0-2-Overlay";
+    readonly WHITE_0_7_8_Overlay: "white-0-7-8-overlay";
     readonly Link: "link";
@@ -117,0 +119,0 @@ readonly Camera: "camera";

utils/types/palette/color.js

@@ -18,2 +18,3 @@ export var Color = {
   Accent_0_5_Opacity: 'accent_0_5_opacity',
+  Accent_0_7_Opacity: 'accent_0_7_opacity',
   Accent_1_2_Opacity: 'accent_1_2_opacity',
@@ -115,2 +116,3 @@ Accent_1_8_Opacity: 'accent_1_8_opacity',
   Green_0_2_Overlay: 'green-0-2-Overlay',
+  WHITE_0_7_8_Overlay: 'white-0-7-8-overlay',
   Link: 'link',
@@ -117,0 +119,0 @@ Camera: 'camera',

No alert changes

Improved metrics

Total package byte prevSize

1026970

increased by0.7%

Number of package files

1035

increased by0.19%

Lines of code

19002

increased by0.57%

No dependency changes