@scaleflex/ui - npm Package Compare versions

Comparing version 2.11.6 to 2.11.7

core/autocomplete/autocomplete.component.js

@@ -5,7 +5,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
+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"];
 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, { useEffect, useState } from 'react';
+import React from 'react';
 import Tick from '@scaleflex/icons/tick';
@@ -24,6 +23,2 @@ 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,
@@ -52,2 +47,4 @@ 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,
@@ -84,4 +81,3 @@ disableTextEllipse = _props$disableTextEll === void 0 ? false : _props$disableTextEll,
       getOptionLabel: getOptionLabel,
-      getOptionDisabled: getOptionDisabled,
-      setMenuJustOpened: setMenuJustOpened
+      getOptionDisabled: getOptionDisabled
     })),
@@ -125,5 +121,2 @@ formattedValue = _useAutocomplete.formattedValue,
   };
-  useEffect(function () {
-    setMenuJustOpened(open);
-  }, [open]);
   var renderMenuItem = function renderMenuItem(option, index) {
@@ -138,3 +131,2 @@ var optionId = getOptionValue(option);
     });
-    var isFocused = !menuJustOpened && index === focusedMenuItemIndex;
     var menuItemProps = {
@@ -149,3 +141,3 @@ key: optionId,
       active: isActive,
-      isFocused: isFocused,
+      isFocused: index === focusedMenuItemIndex,
       onClick: function onClick() {
@@ -158,3 +150,3 @@ return handleMenuItemClick(option);
       }, label), isActive && !renderOptionLabel && /*#__PURE__*/React.createElement(MenuItemActions, null, /*#__PURE__*/React.createElement(Styled.TickIcon, null, /*#__PURE__*/React.createElement(Tick, {
-        size: size === 'md' ? 16 : 14
+        size: 12
       }))))
@@ -223,3 +215,3 @@ };
     return /*#__PURE__*/React.createElement(MenuItem, {
-      disabled: Boolean(noOptionsText),
+      noOptionsText: true,
       size: size
@@ -246,3 +238,3 @@ }, noOptionsText);
       onClick: handleSelectAll
-    }, selectAllButtonLabel), !!(formattedValue !== null && formattedValue !== void 0 && formattedValue.length) && /*#__PURE__*/React.createElement(Button, {
+    }, selectAllButtonLabel), /*#__PURE__*/React.createElement(Button, {
       color: "link-secondary",
@@ -289,2 +281,3 @@ size: "sm",
     open: open,
+    scroll: scroll,
     anchorEl: anchorEl,
@@ -291,0 +284,0 @@ maxMenuHeight: maxMenuHeight

core/autocomplete/autocomplete.hook.d.ts

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

core/autocomplete/autocomplete.hook.js

@@ -22,4 +22,3 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
     _props$closeMenuAfter = props.closeMenuAfterSelection,
-    closeMenuAfterSelection = _props$closeMenuAfter === void 0 ? true : _props$closeMenuAfter,
-    setMenuJustOpened = props.setMenuJustOpened;
+    closeMenuAfterSelection = _props$closeMenuAfter === void 0 ? true : _props$closeMenuAfter;
   var _useState = useState(undefined),
@@ -168,7 +167,5 @@ _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) {
@@ -248,5 +245,4 @@ var option = filteredOptions[focusedMenuItemIndex];
     handleSelectAllOptions: handleSelectAllOptions,
-    focusedMenuItemIndex: focusedMenuItemIndex,
-    setMenuJustOpened: setMenuJustOpened
+    focusedMenuItemIndex: focusedMenuItemIndex
   };
 }

core/autocomplete/autocomplete.props.d.ts

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

core/autocomplete/autocomplete.styles.d.ts

@@ -24,10 +24,6 @@ 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/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"> & {
+    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"> & {
         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: import("styled-components").DefaultTheme;
-    }>> & string;
+    }>, never>, never>> & string;
     Arrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("../arrow-tick").ArrowTickProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & {
@@ -34,0 +30,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,5 +45,4 @@ import styled, { css } from 'styled-components';
 })(function (_ref3) {
-  var maxMenuHeight = _ref3.maxMenuHeight,
-    theme = _ref3.theme;
-  return css(["max-height:", ";background:", ";"], +maxMenuHeight ? "".concat(+maxMenuHeight, "px") : maxMenuHeight, theme.palette[PColor.BackgroundStateless]);
+  var maxMenuHeight = _ref3.maxMenuHeight;
+  return css(["max-height:", ";background:#ffffff;"], +maxMenuHeight ? "".concat(+maxMenuHeight, "px") : maxMenuHeight);
 });
@@ -54,5 +53,5 @@ var OptionGroup = /*#__PURE__*/styled.div.attrs({
   componentId: "sc-uyc6rp-6"
-})(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]);
+})(["&:not(:last-child){padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid ", ";}"], function (_ref4) {
+  var palette = _ref4.theme.palette;
+  return palette[PColor.BordersSecondary];
 });
@@ -59,0 +58,0 @@ var Arrow = /*#__PURE__*/styled(arrowTick).withConfig({

core/autocomplete/autocomplete.utils.js

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

core/button/button.component.js

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

core/button/button.mixin.d.ts

@@ -49,8 +49,2 @@ 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: {
@@ -57,0 +51,0 @@ xs: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;

core/button/button.mixin.js

@@ -65,4 +65,3 @@ 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: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 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 sizeButtonLabelMixin = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ButtonSize.Xs, function (_ref14) {
@@ -69,0 +68,0 @@ var font = _ref14.theme.typography.font;

core/button/button.styles.d.ts

@@ -34,7 +34,5 @@ import type { ButtonProps, ButtonSizeType, ButtonType, SideBarType } from './button.props';
     }>> & string;
-    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"> & {
+    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"> & {
         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>, {
-        size?: ButtonSizeType;
-    }>> & string;
+    }>, never>, never>> & 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"> & {
@@ -41,0 +39,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, marginEndIconMixin } from './button.mixin';
+import { colorButtonMixin, sizeButtonMixin, sizeButtonLabelMixin, sizeSidebarMixin, sizeSidebarDividerMixin, paddingIconLabelMixin, sizeSecondaryButtonMixin } from './button.mixin';
 import { Color as PaletteColor } from '../../utils/types/palette';
@@ -70,7 +70,3 @@ import { ButtonSize, ButtonColor } from '../../utils/types';
   componentId: "sc-lxwit0-7"
-})(function (_ref5) {
-  var _ref5$size = _ref5.size,
-    size = _ref5$size === void 0 ? ButtonSize.Md : _ref5$size;
-  return css(["display:flex;", ""], marginEndIconMixin[size]);
-});
+})(["display:flex;margin-left:6px;"]);
 var Styled = applyDisplayNames({
@@ -77,0 +73,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", "onCancel", "onDateClick", "enableAutoSelect", "maxDate", "minDate", "calendarStyles"];
+var _excluded = ["value", "onChange", "autoSelectToday", "enableAutoSelect", "maxDate", "minDate", "anchorEl", "zIndex", "position", "popperOptions", "open", "setOpen", "calendarStyles", "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; }
@@ -15,2 +15,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; }
 import { intrinsicComponent } from '../../utils/functions';
+import Popper from '../popper';
 import MonthPicker from './month-picker/month-picker.component';
@@ -21,2 +22,3 @@ import YearPicker from './year-picker/year-picker.component';
 import Styled from './calendar.styles';
+import { Position } from '../popper/types';
 var Calendar = intrinsicComponent(function (_ref, ref) {
@@ -27,4 +29,2 @@ var _isYearFormRegex$test;
     autoSelectToday = _ref.autoSelectToday,
-    onCancel = _ref.onCancel,
-    onDateClick = _ref.onDateClick,
     _ref$enableAutoSelect = _ref.enableAutoSelect,
@@ -36,3 +36,13 @@ 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);
@@ -155,3 +165,6 @@ var _getMaxDate = getMaxDate(maxDate),
   };
-  var handleDateClick = function handleDateClick(day) {
+  var handleOpen = function handleOpen(isOpen) {
+    if (setOpen) setOpen(isOpen);
+  };
+  var onDateClick = function onDateClick(day) {
     var newDay = day.timestamp;
@@ -161,3 +174,3 @@ if (onChange) {
     }
-    if (onDateClick) onDateClick(newDay);
+    if (handleOpen) handleOpen(false);
     setSelectedDay(newDay);
@@ -195,3 +208,3 @@ };
     }
-  }, [value]);
+  }, [value, open]);
   useEffect(function () {
@@ -210,3 +223,3 @@ setTimeout(function () {
         onClick: function onClick() {
-          return handleDateClick(day);
+          return onDateClick(day);
         },
@@ -226,3 +239,16 @@ day: day,
   };
-  return /*#__PURE__*/React.createElement(Styled.Calendar, _extends({
+  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,
     style: _objectSpread({}, calendarStyles)
@@ -311,3 +337,5 @@ }, rest, {
   }))), /*#__PURE__*/React.createElement(Styled.CalendarBody, null, renderCalendar()), /*#__PURE__*/React.createElement(Styled.ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
-    onClick: onCancel,
+    onClick: function onClick() {
+      return handleOpen(false);
+    },
     size: "xs",
@@ -320,4 +348,4 @@ color: "basic"
     disabled: isTodayDateDisabled
-  }, "Today")));
+  }, "Today"))));
 });
 export default Calendar;

core/calendar/calendar.props.d.ts

 import type { Values } from '../../utils/types';
-import { VirtualElement } from '../popper/popper.props';
+import { PopperOptions, VirtualElement } from '../popper/popper.props';
 import { Position } from '../popper/types';
@@ -9,9 +9,15 @@ 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;
-    onCancel?: () => void;
-    onDateClick?: (value: number) => void;
+    setOpen?: (value: boolean) => void;
 }
@@ -18,0 +24,0 @@ export interface MonthPickerProps {

core/calendar/calendar.styles.d.ts

@@ -10,5 +10,3 @@ 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>, {
-        open: boolean;
-    }>> & string;
+    }>, never>, keyof CalendarProps> & CalendarProps>, never>, CalendarProps>> & 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"> & {
@@ -68,5 +66,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").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"> & {
+    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"> & {
         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>, CalendarProps>> & 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"> & {
@@ -80,43 +78,19 @@ 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>, {
-        isDisabled: boolean;
-    } & {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
+    }>, never>, CalendarProps>> & 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>, {
-        isDisabled: boolean;
-    } & {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
+    }>, never>, CalendarProps>> & 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>, {
-        isDisabled: boolean;
-    } & {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
+    }>, never>, CalendarProps>> & 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>, {
-        isDisabled: boolean;
-    } & {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
+    }>, never>, CalendarProps>> & 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>, {
-        isDisabled: boolean;
-    } & {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
+    }>, never>, CalendarProps>> & 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>, {
-        isDisabled: boolean;
-    } & {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
+    }>, never>, CalendarProps>> & 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: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]);
+  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]);
 });
@@ -62,3 +62,3 @@ var DatePickerCalendar = /*#__PURE__*/styled.div.attrs({
     open = _ref4$open === void 0 ? false : _ref4$open;
-  return css(["position:absolute;top:0;left:0;box-shadow:unset;transform:", ";transition:transform 0.4s ease-in-out;"], open ? 'translateY(0)' : 'translateY(-100%)');
+  return css(["top:0;left:0;box-shadow:unset;transform:", ";transition:transform 0.4s ease-in-out;"], open ? 'translateY(0)' : 'translateY(-100%)');
 });
@@ -178,4 +178,3 @@ var MonthButtonsWrapper = /*#__PURE__*/styled.div.attrs({
   var palette = _ref11.theme.palette,
-    _ref11$isDisabled = _ref11.isDisabled,
-    isDisabled = _ref11$isDisabled === void 0 ? false : _ref11$isDisabled;
+    isDisabled = _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' : '');
@@ -189,4 +188,3 @@ });
   var palette = _ref12.theme.palette,
-    _ref12$isDisabled = _ref12.isDisabled,
-    isDisabled = _ref12$isDisabled === void 0 ? false : _ref12$isDisabled;
+    isDisabled = _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' : '');
@@ -200,4 +198,3 @@ });
   var palette = _ref13.theme.palette,
-    _ref13$isDisabled = _ref13.isDisabled,
-    isDisabled = _ref13$isDisabled === void 0 ? false : _ref13$isDisabled;
+    isDisabled = _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' : '');
@@ -211,4 +208,3 @@ });
   var palette = _ref14.theme.palette,
-    _ref14$isDisabled = _ref14.isDisabled,
-    isDisabled = _ref14$isDisabled === void 0 ? false : _ref14$isDisabled;
+    isDisabled = _ref14.isDisabled;
   return css(["position:absolute;right:0;color:", ";cursor:", ";pointer-events:", ";"], isDisabled ? palette[PColor.TextPlaceholder] : palette[PColor.IconsPrimary], isDisabled ? 'auto' : 'pointer', isDisabled ? 'none' : '');
@@ -230,3 +226,5 @@ });
   componentId: "sc-10lx57a-23"
-})(["display:flex;justify-content:flex-end;align-items:center;column-gap:4px;width:100%;height:24px;padding-top:12px;.SfxButton-root{max-height:24px;}"]);
+})(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;}"]);
+});
 var Styled = applyDisplayNames({
@@ -233,0 +231,0 @@ Calendar: Calendar,

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

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

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

@@ -22,6 +22,4 @@ import _extends from "@babel/runtime/helpers/extends";
     checkBoxProps = _ref.checkBoxProps,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -28,0 +26,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", "MenuProps"];
+var _excluded = ["defaultColor", "onChange", "pinnedColors", "showTransparentColor", "hidePinIcon", "containerProps"];
 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,3 +33,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; }
     containerProps = _ref.containerProps,
-    MenuProps = _ref.MenuProps,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -291,8 +290,6 @@ var showedColors = showTransparentColor ? transparentColor.concat(pinnedColors) : pinnedColors;
     size: "sm",
-    value: inputType
-    // TODO: Remove containerProps in major release
-    ,
-    MenuProps: _objectSpread(_objectSpread({
+    value: inputType,
+    MenuProps: _objectSpread({
       zIndex: 11112
-    }, containerProps), MenuProps),
+    }, containerProps),
     onChange: function onChange(ev) {
@@ -299,0 +296,0 @@ return setInputType(ev);

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

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

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

@@ -16,4 +16,2 @@ 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) {
@@ -31,4 +29,3 @@ var _isYearFormRegex$test;
     minDate = _ref$minDate === void 0 ? '' : _ref$minDate,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? Position.BottomStart : _ref$position,
+    position = _ref.position,
     label = _ref.label,
@@ -92,5 +89,2 @@ _ref$size = _ref.size,
   };
-  var handleOpen = function handleOpen(isOpen) {
-    if (setOpen) setOpen(isOpen);
-  };
   useEffect(function () {
@@ -145,29 +139,19 @@ if (autoSelectToday) return;
     size: size
-  }, placeholder), /*#__PURE__*/React.createElement(Popper, {
-    onClick: function onClick() {
-      return handleOpen(!open);
-    },
-    anchorEl: datePickerRef.current,
+  }, placeholder), /*#__PURE__*/React.createElement(Calendar, {
+    value: inputValue,
     open: open,
-    popperOptions: popperOptions,
-    wrapperStyles: popperWrapperStyles,
-    zIndex: zIndex,
-    position: position,
-    overlay: true
-  }, /*#__PURE__*/React.createElement(Calendar, {
-    value: inputValue,
+    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,
-    calendarStyles: calendarStyles
-  })));
+    anchorEl: datePickerRef.current,
+    position: position || 'bottom-start',
+    popperOptions: popperOptions,
+    calendarStyles: calendarStyles,
+    popperWrapperStyles: popperWrapperStyles
+  }));
 });
 export default Datepicker;

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

@@ -20,10 +20,8 @@ import { InputProps } from '../input';
     }>> & string;
-    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"> & {
+    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"> & {
         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>, 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>>;
+    }>, never>, never>> & 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: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');
+  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');
 });
@@ -33,5 +33,4 @@ var DatePickerInput = /*#__PURE__*/styled(InputGroup).attrs({
     $isHovering = _ref2$$isHovering === void 0 ? false : _ref2$$isHovering,
-    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');
+    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]));
 });
@@ -42,6 +41,3 @@ var DatePickerIconButton = /*#__PURE__*/styled(IconButton).attrs({
   componentId: "sc-14tu7pc-3"
-})(function (_ref3) {
-  var theme = _ref3.theme;
-  return css(["border:none;padding:0;z-index:1;svg{color:", ";}"], theme.palette[PColor.IconsSecondary]);
-});
+})(["border:none;padding:0;z-index:1;"]);
 var Styled = applyDisplayNames({
@@ -48,0 +44,0 @@ DatePicker: DatePicker,

core/drawer/drawer.component.js

@@ -0,6 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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", "iconsSize", "collapsed", "top", "hideBackdrop", "disablePortal", "collapseButtonLabel", "persistentDrawerStyles", "temproryDrawerStyles", "collapseButtonStyle", "variant", "onClose", "onCollapse", "onCollapseClick", "hideScroll"];
+var _excluded = ["children", "open", "iconsSize", "collapsed", "top", "hideBackdrop", "disablePortal", "collapseButtonLabel", "persistentDrawerStyles", "temproryDrawerStyles", "variant", "onClose", "onCollapse", "onCollapseClick"];
 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,4 +30,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; }
     hideBackdrop = _ref$hideBackdrop === void 0 ? false : _ref$hideBackdrop,
-    _ref$disablePortal = _ref.disablePortal,
-    disablePortal = _ref$disablePortal === void 0 ? false : _ref$disablePortal,
+    disablePortal = _ref.disablePortal,
     _ref$collapseButtonLa = _ref.collapseButtonLabel,
@@ -39,4 +38,2 @@ 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,
@@ -47,4 +44,2 @@ 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);
@@ -70,14 +65,2 @@ 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() {
@@ -120,4 +103,3 @@ var newCollapseState = !isCollapsed;
       onClick: handleCollapse,
-      isCollapsed: isCollapsed,
-      style: _objectSpread({}, collapseButtonStyle)
+      isCollapsed: isCollapsed
     }, /*#__PURE__*/React.createElement(DrawerItemIcon, null, isCollapsed ? function (props) {
@@ -124,0 +106,0 @@ return /*#__PURE__*/React.createElement(ArrowSidebarRightOutline, _extends({}, props, {

core/drawer/drawer.props.d.ts

@@ -18,3 +18,2 @@ import type { PropsWithChildren } from 'react';
     persistentDrawerStyles?: object;
-    collapseButtonStyle?: React.CSSProperties;
     temproryDrawerStyles?: object;
@@ -25,3 +24,2 @@ variant?: DrawerVariant;
     onCollapseClick?: (collapseState: boolean) => void;
-    hideScroll?: boolean;
 }
@@ -28,0 +26,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", "forceTooltip", "tooltipProps", "tooltipTitle", "textSuffix", "textWrapperProps"];
+var _excluded = ["children", "element", "maxLinesCount", "customMaxHeight", "noTooltip", "tooltipProps", "textWrapperProps"];
 import React, { useState, useRef, useLayoutEffect, useCallback } from 'react';
@@ -9,3 +9,2 @@ 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.
@@ -22,7 +21,3 @@
     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,
@@ -50,3 +45,3 @@ textWrapperProps = _ref$textWrapperProps === void 0 ? {} : _ref$textWrapperProps,
       onDoubleClick: ignoreEvent
-    }, tooltipTitle || children);
+    }, children);
   };
@@ -72,20 +67,17 @@ useLayoutEffect(function () {
   }, []);
-  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();
+  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);
 });
 export default EllipsedText;

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

@@ -9,7 +9,4 @@ 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"> & {
@@ -19,6 +16,3 @@ 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 EllipsedTextContainer = /*#__PURE__*/styled.div.attrs({
+var EllipsedTextWrapper = /*#__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) {
@@ -20,3 +15,3 @@ var $maxLinesCount = _ref.$maxLinesCount;
 }).withConfig({
-  componentId: "sc-53xpj8-2"
+  componentId: "sc-53xpj8-1"
 })(function (_ref2) {
@@ -26,13 +21,6 @@ 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,
-  SuffixTextWrapper: SuffixTextWrapper
+  TooltipContent: TooltipContent
 });
 export default Styled;

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

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

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

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

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

@@ -18,5 +18,3 @@ import _extends from "@babel/runtime/helpers/extends";
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Styled.IconButton, _extends({
-    type: "button"
-  }, rest, {
+  return /*#__PURE__*/React.createElement(Styled.IconButton, _extends({}, rest, {
     size: size,
@@ -23,0 +21,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", "thumbColor", "thumbIconSize", "thumbIconPadding", "thumbIcon"],
+  _excluded2 = ["color", "thumbIconSize", "thumbIconPadding", "thumbIcon"],
   _excluded3 = ["leftText", "rightText", "hideFooter"];
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Extends } from '@scaleflex/icons';
+import ArrowChange from '@scaleflex/icons/arrow-change';
 import { getHorizontalPosition } from './image-comparison-slider.utils';
@@ -26,12 +26,10 @@ import ImagePreviewComponent from './image-preview.component';
     _ref2$color = _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,
+    color = _ref2$color === void 0 ? lightPalette[Color.BackgroundStateless] : _ref2$color,
     _ref2$thumbIconSize = _ref2.thumbIconSize,
-    thumbIconSize = _ref2$thumbIconSize === void 0 ? 16 : _ref2$thumbIconSize,
+    thumbIconSize = _ref2$thumbIconSize === void 0 ? 10 : _ref2$thumbIconSize,
     _ref2$thumbIconPaddin = _ref2.thumbIconPadding,
-    thumbIconPadding = _ref2$thumbIconPaddin === void 0 ? 8 : _ref2$thumbIconPaddin,
+    thumbIconPadding = _ref2$thumbIconPaddin === void 0 ? 10 : _ref2$thumbIconPaddin,
     _ref2$thumbIcon = _ref2.thumbIcon,
-    thumbIcon = _ref2$thumbIcon === void 0 ? /*#__PURE__*/React.createElement(Extends, {
-      color: lightPalette[Color.IconsPrimaryHover]
+    thumbIcon = _ref2$thumbIcon === void 0 ? /*#__PURE__*/React.createElement(ArrowChange, {
+      color: lightPalette[Color.IconsPrimary]
     }) : _ref2$thumbIcon,
@@ -117,6 +115,5 @@ restHandleProps = _objectWithoutProperties(_ref2, _excluded2);
     color: color,
-    $thumbColor: thumbColor,
     $thumbIconPadding: thumbIconPadding,
     $thumbIconSize: thumbIconSize
-  }, restHandleProps), thumbIcon), /*#__PURE__*/React.createElement(Styled.ImagesWrapper, null, /*#__PURE__*/React.createElement(Styled.LeftImageWrapper, _extends({
+  }, restHandleProps), thumbIcon), /*#__PURE__*/React.createElement(Styled.LeftImageWrapper, _extends({
     ref: topImageRef
@@ -127,4 +124,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,3 +26,2 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
         thumbIconSize?: number;
-        thumbColor?: string;
         thumbIcon?: React.ReactNode;
@@ -29,0 +28,0 @@ thumbIconPadding?: number;

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

@@ -26,11 +26,5 @@ 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"> & {
@@ -37,0 +31,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;height:100%;user-select:none;"]);
+})(["display:flex;flex-direction:column;gap:10px;user-select:none;"]);
 var Image = /*#__PURE__*/styled.img.attrs({
@@ -19,6 +19,5 @@ className: generateClassNames(baseClassName, 'image')
 })(function (_ref) {
-  var _ref$$isLoading = _ref.$isLoading,
-    $isLoading = _ref$$isLoading === void 0 ? false : _ref$$isLoading,
+  var $isLoading = _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.BackgroundHover], 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.ButtonPrimaryText], pulseKeyframe));
 });
@@ -41,9 +40,7 @@ var LeftImageWrapper = /*#__PURE__*/styled.div.attrs({
   var color = _ref2.color,
-    $thumbColor = _ref2.$thumbColor,
     _ref2$$thumbIconPaddi = _ref2.$thumbIconPadding,
-    $thumbIconPadding = _ref2$$thumbIconPaddi === void 0 ? 8 : _ref2$$thumbIconPaddi,
+    $thumbIconPadding = _ref2$$thumbIconPaddi === void 0 ? 10 : _ref2$$thumbIconPaddi,
     _ref2$$thumbIconSize = _ref2.$thumbIconSize,
-    $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]);
+    $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"));
 });
@@ -56,4 +53,3 @@ var FallbackPreviewWrapper = /*#__PURE__*/styled.div.attrs({
   var backgroundColor = _ref3.backgroundColor,
-    _ref3$gap = _ref3.gap,
-    gap = _ref3$gap === void 0 ? 2 : _ref3$gap;
+    gap = _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);
@@ -75,12 +71,7 @@ });
   componentId: "sc-111irnx-7"
-})(["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%;"]);
+})(["position:relative;overflow:hidden;touch-action:none;"]);
 var Footer = /*#__PURE__*/styled.div.attrs({
   className: generateClassNames(baseClassName, 'footer')
 }).withConfig({
-  componentId: "sc-111irnx-9"
+  componentId: "sc-111irnx-8"
 })(function (_ref5) {
@@ -96,3 +87,2 @@ var theme = _ref5.theme;
   Handle: Handle,
-  ImagesWrapper: ImagesWrapper,
   ComparisonSlider: ComparisonSlider,
@@ -99,0 +89,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-v2';
+export { default as Tooltip } from './tooltip';
 export { default as TooltipV2 } from './tooltip-v2';
@@ -74,2 +74,1 @@ 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-v2';
+export { default as Tooltip } from './tooltip';
 export { default as TooltipV2 } from './tooltip-v2';
@@ -73,3 +73,2 @@ 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 TimePicker } from './time-picker';
+export { default as TextWithHighlights } from './text-with-highlights';

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

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

core/input/input.component.js

@@ -131,5 +131,2 @@ 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);
@@ -226,4 +223,3 @@ }
     isHovering: rest.isHovering,
-    $isSelectedItems: Boolean(isSelectedItems || inputActions),
-    $hasInputActions: Boolean(inputActions)
+    $isSelectedItems: Boolean(isSelectedItems || inputActions)
   }, InputPropsData || {}), /*#__PURE__*/React.createElement(Styled.InputContent, null, renderIcon(iconStart, 'start'), renderField(), renderCopyIcon( /*#__PURE__*/React.createElement(CopyOutline, {
@@ -230,0 +226,0 @@ size: getIconSize(size, 'copy')

core/input/input.props.d.ts

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

core/input/input.styles.d.ts

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

core/input/input.styles.js

@@ -72,6 +72,4 @@ 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:", ";", " 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);
+  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);
 });
@@ -133,3 +131,3 @@ var ClearIcon = /*#__PURE__*/styled.span.attrs({
   componentId: "sc-150k0cz-12"
-})(["display:flex;align-items:center;width:100%;column-gap:8px;box-sizing:border-box;"]);
+})(["display:flex;align-items:center;width:100%;box-sizing:border-box;"]);
 var Styled = applyDisplayNames({
@@ -136,0 +134,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"];
+var _excluded = ["children", "iconStart", "iconEnd", "error", "disabled", "size", "type"];
 import React, { useState, useRef } from 'react';
 import { intrinsicComponent } from '../../utils/functions';
+import { Type } from './types';
 import Styled from './label.styles';
@@ -16,2 +17,4 @@ 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);
@@ -45,3 +48,4 @@ var textRef = useRef(null);
     disabled: disabled,
-    size: size
+    size: size,
+    type: type
   }, rest), iconStart && renderIcon(iconStart, false), /*#__PURE__*/React.createElement(Styled.Text, {
@@ -48,0 +52,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);
@@ -12,2 +15,3 @@ iconEnd?: React.ReactNode | ((props: IconProps) => React.ReactNode);
     size?: LabelSizeType;
+    htmlFor?: string;
 }

core/label/types/index.d.ts

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

core/label/types/index.js

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

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

@@ -19,4 +19,3 @@ import _extends from "@babel/runtime/helpers/extends";
   var children = _ref.children,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    disabled = _ref.disabled,
     _ref$size = _ref.size,
@@ -23,0 +22,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; }
@@ -11,15 +13,14 @@ 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 (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 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 menuItemRef = useRef(null);
@@ -45,6 +46,6 @@ var _React$useState = React.useState(null),
   useEffect(function () {
-    if ((active || isFocused) && enableScrollIntoView) {
+    if ((props.active || isFocused) && enableScrollIntoView) {
       handleScroll();
     }
-  }, [active, isFocused]);
+  }, [props.active, isFocused]);
   var handleSelectedId = function handleSelectedId(ev, selected, depthLevel) {
@@ -75,6 +76,6 @@ var updatedArray = selectedIds.slice(0);
           enableOverlay: false
-        }, option.subMenuProps), /*#__PURE__*/React.createElement(MenuItem, _extends({}, props, {
+        }, option.subMenuProps), /*#__PURE__*/React.createElement(MenuItem, _extends({
           list: option.subList,
           depth: newDepthLevel
-        })));
+        }, props)));
       }
@@ -84,4 +85,3 @@ if (option.content === 'divider') {
           divider: true,
-          key: option.key,
-          style: option.dividerStyle
+          key: option.key
         });
@@ -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 (value === 'divider') {
+    if (props.value === 'divider') {
       return /*#__PURE__*/React.createElement(Styled.MenuItemWrapper, {
         divider: true,
-        key: value,
-        style: dividerStyle
+        key: props.value
       });
     }
     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,
-      $active: active
+      isFocused: isFocused
     }), children));
@@ -140,2 +140,13 @@ }
 MenuItem.displayName = 'MenuItem';
-export default 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,
+//   })
+// ),

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

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

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

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

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

@@ -35,6 +35,8 @@ 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]), 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]), ($noOptionsText || disabled) && css(["color:", ";"], theme.palette[PColor.ButtonDisabledText]));
 });
@@ -52,5 +54,6 @@ 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]), 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]));
+    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]));
 });
@@ -57,0 +60,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", "anchorEl", "maxHeight", "position", "zIndex", "open", "enableOverlay", "hideScroll", "enableUnderlayingEvent", "containerProps", "popperOptions", "popperWrapperStyles", "onClose"];
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+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';
 import { intrinsicComponent } from '../../utils/functions';
@@ -12,3 +15,10 @@ 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,
@@ -18,17 +28,14 @@ maxHeight = _ref$maxHeight === void 0 ? 250 : _ref$maxHeight,
     position = _ref$position === void 0 ? Position.BottomStart : _ref$position,
-    zIndex = _ref.zIndex,
-    _ref$open = _ref.open,
-    open = _ref$open === void 0 ? false : _ref$open,
+    popperOptions = _ref.popperOptions,
     _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);
@@ -46,3 +53,3 @@ var _useState = useState(null),
     var _anchorEl$getBounding;
-    var defaultPosition = {
+    var defaultPosition = _objectSpread({
       top: 0,
@@ -52,3 +59,3 @@ left: 0,
       width: 0
-    };
+    }, anchorElPosition || {});
     var defaultRect = new DOMRect(defaultPosition.left, defaultPosition.top, defaultPosition.width, defaultPosition.height);
@@ -73,3 +80,3 @@ setRect((_anchorEl$getBounding = anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect()) !== null && _anchorEl$getBounding !== void 0 ? _anchorEl$getBounding : defaultRect);
     updateRect();
-  }, [updateRect]);
+  }, [anchorElPosition, updateRect]);
   useEffect(function () {
@@ -95,17 +102,20 @@ if (hideScroll) {
     ref: menuRef,
-    position: position,
-    open: open,
+    position: position || 'bottom-start',
+    open: Boolean(anchorEl),
     anchorEl: anchorEl,
-    overlay: enableOverlay,
+    overlay: Boolean(enableOverlay),
+    onClick: handleClose,
     popperOptions: popperOptions,
     zIndex: zIndex,
     enableUnderlayingEvent: enableUnderlayingEvent,
-    wrapperStyles: popperWrapperStyles,
-    onClick: handleClose
-  }, /*#__PURE__*/React.createElement(Styled.Menu, _extends({
+    wrapperStyles: popperWrapperStyles
+  }, /*#__PURE__*/React.createElement(Styled.Menu, _extends({}, containerProps, {
+    alignCenter: Boolean(alignCenter),
+    scroll: scroll,
+    rect: rect
+  }, rest, {
     ref: ref,
-    $maxHeight: maxHeight,
-    $rect: rect
-  }, containerProps, rest), children));
+    maxHeight: maxHeight
+  }), children));
 });
 export default Menu;

core/menu/menu.props.d.ts

@@ -8,14 +8,19 @@ import type { PropsWithChildren } from 'react';
 export interface MenuProps extends PropsWithChildren, React.HTMLAttributes<HTMLDivElement> {
-    open: boolean;
+    open?: boolean;
+    anchorElPosition?: DOMRect;
     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;
-    onClose?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    scroll?: boolean;
+    enableUnderlayingEvent?: boolean;
+    popperWrapperStyles?: React.CSSProperties;
+    style?: React.CSSProperties;
+    list?: object;
 }

core/menu/menu.styles.d.ts

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

core/menu/menu.styles.js

@@ -21,7 +21,8 @@ import styled, { css, keyframes } from 'styled-components';
 })(function (_ref) {
-  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")));
+  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);
 });
@@ -28,0 +29,0 @@ var Styled = applyDisplayNames({

core/modal/modal.component.js

@@ -12,4 +12,6 @@ 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) {
@@ -33,2 +35,4 @@ 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');
@@ -90,6 +94,4 @@ useEffect(function () {
   };
-
-  // 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));
+  return /*#__PURE__*/createPortal(render(), target);
 });
 export default Modal;

core/popup/popup.component.js

@@ -70,6 +70,4 @@ import _extends from "@babel/runtime/helpers/extends";
   };
-
-  // 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));
+  return /*#__PURE__*/createPortal(render(), target);
 });
 export default Popup;

core/search/search.props.d.ts

@@ -1,6 +0,3 @@
-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;
+import type { InputProps } from '../input';
+export interface SearchProps extends InputProps, Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
 }

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", "fullWidth", "showSelectionKey", "value", "multiple", "hideMenuItemsActions", "onChange", "onClickClearIcon", "readOnly", "disabled", "showClearIcon"];
+var _excluded = ["children", "size", "error", "label", "placeholder", "hint", "LabelProps", "SelectProps", "selectProps", "scroll", "fullWidth", "showSelectionKey", "value", "multiple", "hideMenuItemsActions", "onChange", "readOnly", "disabled", "showClearIcon"];
 import React from 'react';
@@ -22,2 +22,4 @@ import { intrinsicComponent } from '../../utils/functions';
     selectProps = _ref.selectProps,
+    _ref$scroll = _ref.scroll,
+    scroll = _ref$scroll === void 0 ? true : _ref$scroll,
     _ref$fullWidth = _ref.fullWidth,
@@ -31,3 +33,2 @@ fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     onChange = _ref.onChange,
-    onClickClearIcon = _ref.onClickClearIcon,
     _ref$readOnly = _ref.readOnly,
@@ -49,3 +50,5 @@ readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       }
-      return /*#__PURE__*/React.createElement(Label, LabelPropsData || {}, label);
+      return /*#__PURE__*/React.createElement(Label, _extends({
+        error: error
+      }, LabelPropsData || {}), label);
     }
@@ -76,2 +79,3 @@ return null;
     size: size,
+    scroll: scroll,
     onChange: onChange,
@@ -87,6 +91,5 @@ multiple: multiple,
     hideMenuItemsActions: hideMenuItemsActions,
-    showClearIcon: showClearIcon,
-    onClickClearIcon: onClickClearIcon
+    showClearIcon: showClearIcon
   }), 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", "onClickClearIcon", "value", "fullWidth", "selectProps", "MenuProps", "readOnly", "disabled", "placeholder", "showSelectionKey", "hideMenuItemsActions", "showClearIcon", "renderLabel", "onRequestClose", "hideEllipsis"];
+var _excluded = ["children", "size", "error", "multiple", "onChange", "value", "fullWidth", "selectProps", "MenuProps", "readOnly", "disabled", "scroll", "placeholder", "showSelectionKey", "hideMenuItemsActions", "showClearIcon", "renderLabel", "onRequestClose", "hideEllipsis"];
 import React, { useState } from 'react';
@@ -24,3 +24,2 @@ import PT from 'prop-types';
     onChange = _ref.onChange,
-    onClickClearIcon = _ref.onClickClearIcon,
     value = _ref.value,
@@ -34,2 +33,4 @@ _ref$fullWidth = _ref.fullWidth,
     disabled = _ref.disabled,
+    _ref$scroll = _ref.scroll,
+    scroll = _ref$scroll === void 0 ? true : _ref$scroll,
     placeholder = _ref.placeholder,
@@ -66,5 +67,2 @@ showSelectionKey = _ref.showSelectionKey,
     }
-    if (typeof onClickClearIcon === 'function') {
-      onClickClearIcon(event);
-    }
   };
@@ -80,2 +78,3 @@ return /*#__PURE__*/React.createElement(Styled.Container, {
     readOnly: readOnly,
+    showSelectionKey: showSelectionKey,
     isValueExists: isValueExists,
@@ -105,7 +104,7 @@ onClick: readOnly || disabled ? undefined : handleClick
   })), /*#__PURE__*/React.createElement(Styled.Input, selectProps)), /*#__PURE__*/React.createElement(Menu, _extends({
-    onClose: handleClose
-  }, MenuProps, {
+    onClose: handleClose,
+    scroll: scroll,
     open: open,
     anchorEl: anchorEl
-  }), React.Children.map(children, function (child) {
+  }, MenuProps), React.Children.map(children, function (child) {
     return renderOption(child, {
@@ -112,0 +111,0 @@ value: value,

core/select/select.props.d.ts

@@ -16,5 +16,4 @@ import type { Values } from '../../utils/types';
     onChange?: (value: SelectSimpleValueType | SelectSimpleValueType[]) => void;
-    onClickClearIcon?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     selectProps?: React.InputHTMLAttributes<HTMLInputElement>;
-    MenuProps?: Omit<MenuProps, 'open'>;
+    MenuProps?: MenuProps;
     readOnly?: boolean;
@@ -25,2 +24,3 @@ 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,7 +10,6 @@ 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" | "$hasInputActions"> & {
+    }>, never>, "theme" | "$fullWidth" | "$error" | keyof import("../input").InputProps | "$isSelectedItems"> & {
         $isSelectedItems?: boolean;
         $fullWidth?: boolean;
         $error?: boolean;
-        $hasInputActions?: boolean;
     } & import("../input").InputProps & {
@@ -20,7 +19,6 @@ 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" | "$hasInputActions"> & {
+    }>, never>, "theme" | "$fullWidth" | "$error" | keyof import("../input").InputProps | "$isSelectedItems"> & {
         $isSelectedItems?: boolean;
         $fullWidth?: boolean;
         $error?: boolean;
-        $hasInputActions?: boolean;
     } & import("../input").InputProps & {
@@ -27,0 +25,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,4 +11,5 @@ import React, { ChangeEvent } from 'react';
     readOnly?: boolean;
+    $disabled?: boolean;
     disabled?: boolean;
     size?: SwitcherSizeType;
 }

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

@@ -9,6 +9,5 @@ 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 ? Align.Left : _ref$align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
     paddingProp = _ref.padding,
@@ -15,0 +14,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", "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", "appliedValue", "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,2 +54,3 @@ import { InfoOutline, CopyOutline } from '@scaleflex/icons';
     loading = _ref.loading,
+    appliedValue = _ref.appliedValue,
     disableOnEnter = _ref.disableOnEnter,
@@ -216,3 +217,10 @@ showTooltip = _ref.showTooltip,
   };
+
+  // TODO remove when add clear all button
   useEffect(function () {
+    if (typeof appliedValue === 'string' && !appliedValue) {
+      setUserInput('');
+    }
+  }, [appliedValue]);
+  useEffect(function () {
     if (showCopyMessage) {
@@ -244,3 +252,5 @@ setTimeout(function () {
     fullWidth: fullWidth
-  }, /*#__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({
+  }, /*#__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({
     size: size,
@@ -247,0 +257,0 @@ error: tagsError,

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

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

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

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

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

 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { escapeRegExp } from '../../utils/functions';
-export var tagsSuggestionsFilter = function tagsSuggestionsFilter(suggestedTags, userInput, getTagLabel, alwaysShowSuggestedTags) {
+var tagsSuggestionsFilter = function tagsSuggestionsFilter(suggestedTags, userInput, getTagLabel, alwaysShowSuggestedTags) {
   if (!userInput && !alwaysShowSuggestedTags) {
@@ -18,2 +18,3 @@ 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:9px 12px;", ""], font[FV.InputMd]);
+  return css(["padding:8px 12px;", ""], font[FV.InputMd]);
 }), InputSize.Md, function (_ref3) {
   var font = _ref3.theme.typography.font;
-  return css(["padding:9px 16px;", ""], font[FV.InputLg]);
+  return css(["padding:8px 16px;", ""], font[FV.InputLg]);
 });

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

@@ -39,11 +39,2 @@ 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({
@@ -50,0 +41,0 @@ ref: ref,

core/tooltip/tooltip.component.js

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

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

@@ -10,3 +10,2 @@ import _extends from "@babel/runtime/helpers/extends";
 import Styled from './upload-input.styles';
-import { ButtonColor } from '../../utils/types';
 var UploadInput = intrinsicComponent(function (_ref, ref) {
@@ -17,3 +16,3 @@ var error = _ref.error,
     _ref$buttonColor = _ref.buttonColor,
-    buttonColor = _ref$buttonColor === void 0 ? ButtonColor.Primary : _ref$buttonColor,
+    buttonColor = _ref$buttonColor === void 0 ? 'primary' : _ref$buttonColor,
     _ref$placeholder = _ref.placeholder,
@@ -20,0 +19,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.6",
+  "version": "2.11.7",
   "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;}.Drawer-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;}"]);
 export default CommonStyles;

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

@@ -21,3 +21,2 @@ import type { ColorsMap } from './colors-map';
         accent_0_5_5_opacity: string;
-        accent_0_7_opacity: string;
         accent_0_5_opacity: string;
@@ -147,3 +146,2 @@ accent_1_2_opacity: string;
         "green-0-2-Overlay": string;
-        "white-0-7-8-overlay": string;
     };
@@ -171,3 +169,2 @@ };
     "green-0-2-Overlay": string;
-    "white-0-7-8-overlay": string;
     link: string;
@@ -271,3 +268,2 @@ camera: string;
     accent_0_5_5_opacity: string;
-    accent_0_7_opacity: string;
     accent_0_5_opacity: string;
@@ -274,0 +270,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_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)')),
+  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)')),
   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(_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)'))
+  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)'))
 };
 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,3 +18,2 @@ 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";
@@ -116,3 +115,2 @@ 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";
@@ -119,0 +117,0 @@ readonly Camera: "camera";

utils/types/palette/color.js

@@ -18,3 +18,2 @@ 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',
@@ -116,3 +115,2 @@ 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',
@@ -119,0 +117,0 @@ Camera: 'camera',

No alert changes

Worsened metrics

Total package byte prevSize

1019860

decreased by-0.69%

Number of package files

1033

decreased by-0.19%

Lines of code

18894

decreased by-0.57%

No dependency changes